So I have some code for an expand/collapse feature which is working at present, except there are several sections and the page gets very long and confusing when several are expanded. Does anyone know how I can add an auto collapse to these sections when another one is expanded?

I might have missed out a </div> or something when copying the code as I'm trying to just take the relevant bits, but it does work. My second question - does anyone know how I can make the text XXX activate the expand/collapse? In SEO terms, I'm trying to make each button and text, add XXX to the URL for ratings as you can see from the href (Obviously the headings aren't actually a line of 'X's).

I'd appreciate any help.


Here is the code I'm using:

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>


<div class="cat-divider"><!-- --></div>
<table style="width: 100%;">
<tbody>
<tr>
<td>
<h2><span style="color: #007CD7;"><a name="XXX" href="#XXX"><span style="font-size: 12pt;">XXX</span></a></span></h2>
</td>
<td align="right"><a href="#XXX"><input type="button" value="Expand/Close" onclick="return toggleMe('para1')" /></a></td>
</tr>
</tbody>
</table>
<div class="cat-divider"><!-- --></div>
<div style="display:none" id="para1">


blah blah blah blah blah


<p><a href="#">[Top] </a></p>
<div class="cat-divider"><!-- --></div>
</div>