Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hide/Display DIV

    I'm trying to add a script to my site which will hide and display a DIV. I have managed to get it so that it can be removed, but I'm struggling to get it so it can be re added.

    www.blueskullofdeath.com

    It is the 2nd box under the banner.

    Script so far...

    Code:
    function RemoveNode()
    {
            d = document.body;
            d_nested = document.getElementById("indexheader");
            throwaway_node = d.removeChild(d_nested);
    }
    HTML
    Code:
    <div id="removeindexheader"><a onclick="RemoveNode()">Remove &nbsp;</a></div>
    If you could help me so you can hide and display the division. It would be much appreciated. Thanks.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here' a simple way to toggle the display value of a div

    PHP Code:
    <script type="text/Javascript">


    function 
    showHideNode(){
    el=document.getElementById("removeindexheader")
    if(
    el.style.display=="block"){
    el.style.display="none"
    }
    else{
    el.style.display="block"
    }


    }
    </script>


    <div id="removeindexheader" style="display:block">Hello World</div>

    <a href="#null" onclick="showHideNode()">Show/Hide</a> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Imho, it's better to use the js to add or remove a className which hides the div. Then, specify the rule in the CSS, where the guts of presentational data belong.

    e.g.

    css
    Code:
    .hide {
    	display: none;
    }
    js
    Code:
    function showHideNode() {
    
    	var el = document.getElementById('removeindexheader');
    	el.className = (el.className == 'hide') ? '' : 'hide';
    
    }
    markup
    Code:
    <div id="removeindexheader">Hello World</div>
    
    
    
    <a href="#" onclick="showHideNode(); return false;">Show/Hide</a>
    The script can be made more robust to account for pre-existing class values on an element, but you should be able to get the gist from the basic code above.

  • #4
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It worked. Thanks a lot


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •