This is untested. I think this is what you're after. It could be done much easier if the html was coded differently but this should work fine.
Code:
<!--
function swap (element)
{
var el = document.getElementById(element.id);
var split = el.innerHTML.split (' ');
if (split[0] == 'Hide')
{
// ##### SHOW CONTAINER ####
document.getElementById(element.id + '_conainer').style.display = 'none';
// ##### CHANGE TEXT #####
el.innerHTML = 'Show ' + split[1];
}
else
{
// ##### HIDE CONTAINER ####
document.getElementById(element.id + '_conainer').style.display = 'none';
// ##### CHANGE TEXT #####
el.innerHTML = 'Hide ' + split[1];
}
}
function hide (id)
{
// ##### HIDE CONTAINER ####
document.getElementById(id + '_conainer').style.display = 'none';
// ##### CHANGE TEXT #####
var el = document.getElementById(id);
var split = el.innerHTML.split (' ');
el.innerHTML = 'Show ' + split[1];
}
//-->
Your links should be like this:
Code:
<a id="terms" onclick="swap (this); hide ('options');" />Show Terms</a>
<a id="options" onclick="swap (this); hide ('terms');" />Show Options</a>
Your containers should be like this:
Code:
<div id="terms_container" style="display: none;"><!-- ANY TEMRS HTML HERE --></div>
<div id="options_container" style="display: none;"><!-- ANY OPTIONS HTML HERE --></div>