Toggle Area - Display + Hide

Published in Website Design on Saturday, 21 February 2009  |   Subscribe to rss feed for Toggle Area - Display + Hide (rss logo graphic) Post RSS

This simple script uses a link to show and hide an area of HTML on a web page. 

You can set the layer to be visible or invisible when the page first loads. When the link is clicked, the JS toggles CSS visibility of the layer between 'visible' and 'none'.

The text of the link changes to reflect the status of the HTML area.

View The Sample

Show Area

Get The Code

Include the following functions in the <head> area of the page (or include them in your external javascript file):

<script type="text/javascript">

function toggleLayer(layerId, linkid, linktoshow, linktohide){
if(document.getElementById(layerId).style.display == "none"){
// div is hidden, so let's show
document.getElementById(layerId).style.display = "block";
document.getElementById(linkid).innerHTML = linktohide;

}else{
// div is not hidden, so hide
document.getElementById(layerId).style.display = "none";
document.getElementById(linkid).innerHTML = linktoshow;
}
}

</script>

Use this code in the page <body> to activate the function:

<a href="javascript:void()" id="showHideLink" onClick="toggleLayer('showHide', 'showHideLink', 'Show Layer', 'Hide Layer');">Show Layer</a>

<div id="showHide" style="display:none;">
<h3>Show / Hide Area</h3>
<p>Put the HTML to show and hide in this div. It can include links, images, forms and nearly all regular HTML elements!</p>
</div>

 

Note: The initial CSS style - display:none; - needs to be included inline in the HTML (as opposed to an external CSS file).

All resources written by The WebFertile Team.

Whatever your business needs, one of our highly trained small business development experts is sure to be able to help.

 





Tags

web design nottingham, website design for small business, javascript, layers