Expand & Collapse 1

A simple method of showing and hiding the contents of a div
Each click on the appropriate text will show or hide the relevant content

Expand 1

Expand 2

Expand 3

<HTML>
<HEAD>
<TITLE>Expand & Collapse 1</TITLE>

<script type="text/javascript">

function showHideMe(id){
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="block"
}
else{
document.getElementById(id).style.display="none"
}
}

</script>

<style type="text/css">
.expands{
width:60px;
cursor:hand;
cursor:pointer;
}
</style>

</HEAD>
<BODY>
<h1>Expand & Collapse 1</h1>

<div class="expands" onclick="showHideMe('div1')">Expand 1</div>
<div id="div1" style="display:none;border:1px solid #55AA55;background-color:#AFA;width:100px">
Element One
</div>

<div class="expands" onclick="showHideMe('div2')">Expand 2</div>
<div id="div2" style="display:none;border:1px solid #AA5555;background-color:#FAA;width:100px">
Element Two
</div>

<div class="expands" onclick="showHideMe('div3')">Expand 3</div> 
<div id="div3" style="display:none;border:1px solid #5555AA;background-color:#AAF;width:100px">
Element Three
</div>

</BODY>
</HTML>