JavaScript - Show or hide a div using a link and CSS

Links Pages or Directory Pages
It is often handy to be able to show or hide a DIV section using a link. The following two examples show two different techniques for accomlishing this function.

Example 1:  This example shows how to use JavaScript and CSS to show and hide a DIV section when the link is hovered over (when you move your mouse over the link - to show - and off - to hide the DIV).

<a onmouseover="document.getElementById('div_name').style.display='';" 
onmouseout="document.getElementById('div_name').style.display='none';" 
href="" onclick="return false;" 
style="text-decoration:none;border-bottom:1px dotted blue;">
Show more...</a>
<br />
<div id="div_name" style="display:none;margin:15px 15px 0px 15px;
  padding:5px;border:1px solid #aaa;">
This is more information placed in our hidden div.  
When you move your mouse off the link above this DIV area will 
disappear.
</div>
Here is this example in action:  Show more...

Notice we are using the "onmouseover" and "onmouseout" events of the "a href" link tag to perform the JavaScript calls to change the "style.display" status from "none" to "" (blank - visible). We are using the "onclick" event to "return false;" or do nothing - so that the normal link action will not be processed, otherwise the page may be reloaded when the link is clicked.

Also we are using a dotted bottom border CSS style for the link rather than the normal solid underline. This helps to cue the viewer that the link is not a typical link that will take them to another page but will do something different - the showing of the hidden DIV in this case.

Also notice that the DIV style is initially set to "display:none;" to have it initially hidden. And the DIV's margins are set for 15px top, right and left, but bottom is 0px so when the DIV is shown there it does not look like there is an extra line between the DIV and the next paragraph.

But what if you want to keep the DIV open/visible even if the visitor moves their mouse off of the link?

You can either remove the "onmouseout" code or change the functionality to show the hidden DIV when the pseudo-link is clicked, then add a "hide" link in the DIV. The following example shows the use of the "onclick" event.

Example 2:  This example shows how to use JavaScript and CSS to show a DIV section when the link is clicked and hide the DIV section when a "hide" link is clicked.

<a onclick="document.getElementById('div_name2').style.display='';return false;" 
href="" style="text-decoration:none;border-bottom:1px dotted blue;">
Show more...</a>
<br />
<div id="div_name2" style="display:none;margin:15px 15px 0px 15px;padding:5px;border:1px solid #aaa;">
This is more information placed in our hidden div.  
When you click on the "hide" link this DIV area will disappear:  
<a onclick="document.getElementById('div_name2').style.display='none';return false;" href="" 
style="text-decoration:none;border-bottom:1px dotted blue;">hide</a>
</div>
Here is this example in action:  Show more...

Notice we have simply exchanged the "onmouseover" code in Example 1 with the "onclick" code and kept the "return false;" part of the "onclick" code. The "onmouseout" code is removed and a "hide" link is added to the bottom of the DIV section. The "hide" link also uses the same technique to change the DIV's "style.display" status back to "none".


More:   Useful Javascript Tips and Code Snippets

Related:  
Useful PHP Scripts, Functions and Code Snippets
Useful MySQL Commands and Code Snippets
Useful Perl Scripts, Functions and Code Snippets
Useful MediaWiki Extensions, Scripts, Functions and Code Snippets