Hide/Show

toughshot

May 5th 2008, 3:34 pm

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.

rkquest

May 5th 2008, 10:02 pm

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>

Panzer

May 6th 2008, 10:59 pm

You could also use jQuery, .show() .hide() functions.

rkstech

May 7th 2008, 4:12 pm

Go to dynamicdrive
and search for toggle you get tonnes of results

I have used it recently at
partyrama.co.uk/personalisedribbons/Index.asp

CommandoBob

May 8th 2008, 6:57 am

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>

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?

rkstech

May 8th 2008, 3:26 pm

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

rkquest

May 8th 2008, 8:40 pm

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>

Or you can do it in the external CSS file if you have one.