Chris's wiki | Main / ShowHideDiv

<HEAD>

<style type="text/css">
<!--
.content {
        position: absolute;
        top: 50px;
        width: 200px;
        height:200px;
        background:#f0f0f0;
        border:1px #404040 double;
        border-top:1px #c0c0c0 double;
        border-right:1px #c0c0c0 solid;
        visibility: hidden;                 /* the  visibility: hidden   attribute ensures everything is
        hidden when the page is loaded */

}

-->
</style>

<script type="text/javascript">
<!-- Begin
//this function hides the divs
function hideAll () {
        document.getElementById('literature').style.visibility='hidden';
        document.getElementById('something').style.visibility='hidden';
        document.getElementById('somethingelse').style.visibility='hidden';
}

//this function shows the div named by ele
function showEle(ele) {
        //hide them all and reveal the one we want
        hideAll();
        document.getElementById(ele).style.visibility='visible';
}

// End -->
</script>
</HEAD>

<!-- the onload event tiggers when the page is loaded and causes the specified
div to be shown initially - you could leave this off all together to have
nothing shown when the page is first opened -->
<BODY onload="showEle('something')" >
<table><tr><td>
<table cellpadding=5>
<!-- these are the links to be clicked -->
<tr><td><a href="javascript:showEle('literature')" >Literature</a></td></tr>
<tr><td><a href="javascript:showEle('something')" >something</a></td></tr>
<tr><td><a href="javascript:showEle('somethingelse')" >somethingelse</a></td></tr>
</table>
</td>
<td>

<!-- these are the divs to hide and reveal -->
<div id="literature" class="content">
A hundred and one papers about green slimey things...
</div>
<div id="something" class="content">
A hundred and one things about green slimey things...
</div>
<div id="somethingelse" class="content">
A hundred and one other things about green slimey things...
</div>
</td></tr></table>
Main.SideBar (edit)

ShowHideDiv
