Probably the easiest way to do that is
with an inline javascript. I did something like that years ago on
a site, but the inline javascript plugin I used then is way out of
date... It still works, but I can't in good conscience recommend
it. There are probably other, better plugins out there which will
accomplish the same thing. And I suspect someone on this list is
probably better at javascript and can suggest corrections to
what's below.
PS: your grammar is incorrect. 50s, 60s, 70s etc DO NOT get apostrophes. They are
neither contractions or possessives. They are plurals. Pet peeve.
You may continue reading if you promise to remove the
apostrophes!
The basics of the javascript I added to the page is:
*******************
this is the script part. You'll need to create separately named
showhide functions for each element you want to open (ie:
showhide50, showhide60, etc)
*******************
[script language="javascript" type="text/JavaScript"]
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
[/script]
*******************
Below is the part that goes in the page body. In my case, the
text "By Name" is what gets clicked on to expand the hidden text.
In yours, you'd put the buttons you've created. You'll need to
name each div separately as well (ie, div50, div60, etc)
*******************
<span style="text-decoration: none;"
onclick="showhide('div1');"> By Name </span>
<div id="div1" style="display: none;">
[your data here]
</div><noscript><div id="div1" >
[your data here]
</div></noscript>