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.
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:
Go to dynamicdrive and search for toggle you get tonnes of results I have used it recently at partyrama.co.uk/personalisedribbons/Index.asp
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?
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
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.