Hide / Show DIV Onclick Tutorial

Ever wanted to be able to hide / show a DIV(layer)? Well i found the perfect script to help out. The original post came from: http://www.webmasterworld.com/forum91/441.htm

I used the script when creating a recipient list with categories. Onclick of the title name it drops down the contacts included in that list.

—————————————-

A friend of mine is using this JS code in the header:

<script language=”javascript”> <!– var state = ‘none’; function showhide(layer_ref) { if (state == ‘block’) { state = ‘none’; } else { state = ‘block’; } if (document.all) { //IS IE 4 or 5 (or 6 beta) eval( “document.all.” + layer_ref + “.style.display = state”); } if (document.layers) { //IS NETSCAPE 4 or below document.layers[layer_ref].display = state; } if (document.getElementById &&!document.all) { hza = document.getElementById(layer_ref); hza.style.display = state; } } //–> </script>

and this html code for each division that is to be hidden/shown:

<p><a href=”#” onclick=”showhide(‘div1′);”>show/hide me</a></p> <div id=”div1″ style=”display: none;”>This is the content</div>

(use different IDs for different divisions)

The difference between using the css tags ‘visibility’ and ‘block’ is that with ‘block’ the layout will be updated as well.

——————

There are a few additional posts regarding NS4 updates to working with other browsers so check it out.