Simple Show Hide script

[surreal5335]

The sure simplicity of this script makes it very useful in showing and hiding information which can be placed anywhere on the page and also be activated using most any event handlers.


<script language="javascript" type="text/javascript">
var currentSpan = 1;
function showMe(n) {
document.getElementById("ex_"+currentSpan).style.display = "none";
document.getElementById("ex_"+n).style.display = "block";
currentSpan = n;
}
</script>


HTML code:


<img src="listings.png" onmouseover="showMe(1)">


for the content that you want to show/hide:


<span id="ex_1" style="display:none;">
<!--content goes here--!>
</span>


To create more content that you want activated separately simply just make your html as such:

onmouseover="showMe(2)"

<span id="ex_2" style="display:none;">
<!--content goes here--!>
</span>

Once one is showing, when you activate other content, the older content goes back into hiding, making this a rather nice script for creating pull down menus, vertical and horizontal.