script for FAQ page?

[steve-parrott]

I'm looking for a cool way to create a FAQ page so when you click on the question the answer opens up beneath it.

Check out this page:

http://lab.msdn.microsoft.com/express/faq/default.aspx

That's exactly what I want.

I tried using project 7's tree menu magic, but it seems to limit the number of words that can be entered in each line. And it seems that you can't work on answers in the code view because when you try to go through the "modify TMM" dialogue, it erases what you did in the code view.

Any leads on scripts that work for this?

Thanks

[mikmik]

<h1><a name='Intro'>Frequently Asked Questions</a></h1>





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


<span style="color:#000000;">Get answers to common questions on working with the Express products
<div>Show all answers</div>
<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>
</span>


</span>



</p>



<hr />

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

<li class="gray">What are the Express products?



<span style="color:#000000;"><div id="a_001" style="display:none;">The Express products are an expansion of the Visual Studio product line to include lightweight, easy to use, and easy to learn tools for hobbyists, enthusiasts, and students who want to build dynamic Windows applications, Web sites, and Web services.


With the Express products, users can:
<ul>
[*]Learn how to program using a streamlined, lightweight development environment with built-in tutorial content[*]Evaluate the .NET Framework for Windows and Web development[*]Create fun and interesting applications for their personal enjoyment or to share with their friends [/list]The Express products consist of:
<ul>[*]Visual Web Developer 2005 Express Edition, a lightweight tool for building dynamic Web sites and Web services[*]Visual Basic 2005 Express Edition, a streamlined programming tool for beginning programmers to learn how to build exciting Windows applications[*]Visual C# 2005 Express Edition, Visual C++ 2005 Express Edition, and Visual J# 2005 Express Edition, targeted programming tools for students and enthusiasts who wish to learn the fundamentals of programming[*]Microsoft also ships SQL Server 2005 Express Edition, an entry-level database for hobbyists, enthusiasts, and students developers
[/list]</p></div>
</span>

<li class="gray">What are the core features in the Express products?



<span style="color:#000000;"><div id="a_002" style="display:none;">The Express products are very lightweight in both features and size. Our aim is to keep the products at 50 MB or smaller, making them easy to download and install. Beyond that, probably the single biggest feature is simplicity. Beginning hobbyists, enthusiasts, and students may be overwhelmed by today's tools. The Express products will give them a very streamlined user experience, helping them focus on enjoying programming.</div>
</span>

<li class="gray">Are the Express products intended to replace Visual Studio?



etc...

I started looking through my scripts, then I thought I would view source for the heck of it. MS usually doesn't let you get these sorts of things but it worked this time! LOL

[ADAM Web Design]

I've found that the Javascript can be simplified for the display function quite a bit. I've written a very simple JScript function and called it with one line of HTML code and it seems to work fine.

Here's the Javascript. As you can see, it examines the value of the CSS display property divID and adjusts the value accordingly:

function togglediv(divID) {

	var curDisplay = document.getElementById(divID).style.display;
	if (curDisplay == 'none') {
		document.getElementById(divID).style.display = 'block';
	} else {
		document.getElementById(divID).style.display = 'none';
	}

}

The initial CSS is very simple. Just create a class for all of the answer divs and set its display property to none (this is much easier than defining it for each individual div, and besides, this will change anyway):

.answer {
      display:  none;
}

And the HTML for both the question and answer:

<a href="javascript:togglediv('Answer1')Question</a></p>
<div id="Answer1" class="answer">Answer</div>

I haven't yet used this for a FAQ, but I have for a menu.

http://www.savethestudents.com is the site I used it on if you want to see it in action.

[steve-parrott]

Thanks, I'll give these a try.

[steve-parrott]

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]