Hide/Show

Discussion in 'JavaScript' started by toughshot, May 5, 2008.

  1. #1
    Is there a simple javascript that allows divs to show/hide upon clicking a link? I have a header where I would have the link and below it a seperate div that I would like to hide behind it, and then show on click of the header.
     
    toughshot, May 5, 2008 IP
  2. rkquest

    rkquest Well-Known Member

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    140
    #2
    Try this..

    
    <html>
    <head>
    <script type="text/javascript">
    function toggle(elementID) {
    	if (document.getElementById(elementID).style.display=='none') 
    		document.getElementById(elementID).style.display = '';
    	else 
    		document.getElementById(elementID).style.display = 'none';
    }
    </script>
    </head>
    <body>
    <a href="#" onclick="toggle('myDiv')">Toggle</a>
    <div id="myDiv">
    	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus id.
    </div>
    </body>
    </html>
    
    HTML:
     
    rkquest, May 5, 2008 IP
  3. Panzer

    Panzer Active Member

    Messages:
    381
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    58
    #3
    You could also use jQuery, .show() .hide() functions.
     
    Panzer, May 6, 2008 IP
  4. rkstech

    rkstech Active Member

    Messages:
    195
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #4
    Go to dynamicdrive
    and search for toggle you get tonnes of results

    I have used it recently at
    partyrama.co.uk/personalisedribbons/Index.asp
     
    rkstech, May 7, 2008 IP
  5. CommandoBob

    CommandoBob Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    This worked fine for me.

    But I would really like to have the page open with 'myDiv' hidden. The user would have to click on Toggle to display 'myDiv'. How would I do that?
     
    CommandoBob, May 8, 2008 IP
  6. rkstech

    rkstech Active Member

    Messages:
    195
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #6
    hi

    On your body load you can call a function that will toggle your div
    <body onload ="toggle('myDiv')">

    Something like this will do that trick
     
    rkstech, May 8, 2008 IP
  7. rkquest

    rkquest Well-Known Member

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    140
    #7
    Or you can give the myDiv element a "display:none" style.

    
    <div id="myDiv" style="display:none">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus id.
    </div>
    
    HTML:
    Or you can do it in the external CSS file if you have one.
     
    rkquest, May 8, 2008 IP