 Newsletter sign-up (we value your privacy, unsubscribe at any time):
|
I seem to recall there being a way to show and hide a div, using a toggle. In other words, you click on the div, and it's content is shown; you click again, and the content is hidden.
Basically I need a script or code snippet that will toggle between showing and hiding a div?
Can someone please provide an example?
Hi Sam,
I just ran across a way to do this. It uses JavaScript:
function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById )
elem = document.getElementById( whichLayer );
else if( document.all )
elem = document.all[whichLayer];
else if( document.layers )
elem = document.layers[whichLayer];
vis = elem.style;
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
The above JavaScript is the code to actually toggle (show/ hide) the div. You can put the snippet in the header of your web page.
Next, you'll want to define the div you're actually going to toggle:
<div id="toggleDIV"> Now you see me, now you don't!
</div>
Put this where you want it to appear on the page. Finally, as a last step you'll want to create the link that will toggle this div (show or hide it). The link and the div to toggle don't have to be next to each other on the page - their location is independent of their functionality. To place the toggle link use this:
<a href="javascript:toggleLayer('toggleDIV');" title="Clicking here will show or hide this DIV">
Show/ hide
</a>
