I couldn't get Adam's script working, so I went back to the MS script as mikmik suggested. I'm happy with the results except I'd like the show/hide to work on three levels instead of just two.

I can click on level one to reveal level two, then click on level two to reveal level three. The problem is that when all three levels are visible, if I click on level one, only level two hides – level three is still there. Is there a script modification that will collapse all subordinate levels for each[*] item?

Here's my test page link:

http://www.cast-lighting.com/faq.html

Heres the head code:

<SCRIPT LANGUAGE="javascript">

function ShowHide(divId)
{
var id = document.getElementById(divId);
if (id.style.display == "none")
{
eval("id.style.display = 'block';");
}
else
{
eval("id.style.display = 'none';");
}
}

function ShowHideAll(show)
{
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++)
{
var divId = divs[i].id;
if ( divId.indexOf("a_") == 0 )
{
if( true == show ) {
eval("document.getElementById('" + divId + "').style.display = 'block'");
} else {
eval("document.getElementById('" + divId + "').style.display = 'none'");
}
}
}
}

function ToggleAnswers() {
var tog = document.getElementById("Toggle");
//if(null != tog) {
if( tog.innerText == "Show all answers") {
ShowHideAll(true);
tog.innerText = "Hide all answers";
} else {
ShowHideAll(false);
tog.innerText = "Show all answers";
}
//}
}

</SCRIPT>

Here's the body code:



<span style="display:inline-block;">

<span style="color:#000000;">
<div>Show all answers</div>
</span>


</span>


<h3><a name='general'>General Questions</a></h3>
<ul>

<li class="gray"><a style="font-weight:bold;" href="javascript:ShowHide('a_001');">What
are the Express products?</a>
<div class="faqlev2" id="a_001" style="display:none;">Answer</div>
<div class="faqlev3" id="a_0012" style="display:none;">Answer</div>


<li class="gray"><a style="font-weight:bold;" href="javascript:ShowHide('a_002');">What
are the Express products?</a> <span style="color:#000000;">
<div id="a_002" style="display:none;">Answer</div>
</span>

<li class="gray"><a style="font-weight:bold;" href="javascript:ShowHide('a_003');">What
are the Express products?</a> <span style="color:#000000;">
<div id="a_003" style="display:none;">Answer</div>
</span>

<li class="gray"><a style="font-weight:bold;" href="javascript:ShowHide('a_0010');">What
are the Express products?</a> <span style="color:#000000;">
<div id="a_0010" style="display:none;">Answer</div>
</span> [/list]