Thats done with javascript and CSS, here is one example of how it can be done.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Expandable/Collapsable Headers</title>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
background-color:#FFFFFF;
}
.head-div {
background-color:#000099;
color:#FFFFFF;
font-weight:bold;
}
a, a:link, a:visited, a:hover, a:active {
color:#FFFFFF;
text-decoration:underline;
}
-->
</style>
<script type="text/javascript">
<!--
function expand(what){
document.getElementById(what).style.display='block';
}
function collapse(div1,div2,div3,div4){
document.getElementById(div1).style.display='none';
document.getElementById(div2).style.display='none';
document.getElementById(div3).style.display='none';
document.getElementById(div4).style.display='none';
}
//-->
</script>
<script type="text/javascript">
<!--
document.write('<style type="text/css">');
document.write('.the-header {display:none;}');
document.write('</style>');
//-->
</script>
</head>
<body>
<div class="head-div"><a href="#" onclick="expand('header1');collapse('header2','header3','header4','header5');return false">Expand</a></div>
<div class="the-header" id="header1">This is text in header 1</div>
<div class="head-div"><a href="#" onclick="expand('header2');collapse('header1','header3','header4','header5');return false">Expand</a></div>
<div class="the-header" id="header2">This is text in header 2</div>
<div class="head-div"><a href="#" onclick="expand('header3');collapse('header1','header2','header4','header5');return false">Expand</a></div>
<div class="the-header" id="header3">This is text in header 3</div>
<div class="head-div"><a href="#" onclick="expand('header4');collapse('header1','header2','header3','header5');return false">Expand</a></div>
<div class="the-header" id="header4">This is text in header 4</div>
<div class="head-div"><a href="#" onclick="expand('header5');collapse('header1','header2','header3','header4');return false">Expand</a></div>
<div class="the-header" id="header5">This is text in header 5</div>
</body>
</html>