FAQ

[Zackery]

I really like how Microsoft's FrontPage FAQ webpage works. When you click
on the question, the answer is displayed below the question. You can then
click on the question again to have the answer disappear. How is this done?
Is it possible to do this in FrontPage? I am using FrontPage2003.

here is the link to MS FrontPage FAQ webpage....
http://www.microsoft.com/office/frontpage/prodinfo/faq.mspx

 

[Tom Pepper Willett]

Zackery: If you view the source code on that page, you will see it is done
with JavaScript.

You could use their script as a building block, or Google for scripts that
might accomplish what you're looking for.


--
===
Tom "Pepper" Willett
Microsoft MVP - FrontPage
---
About FrontPage 2003:
http://office.microsoft.com/home/office.aspx?assetid=FX01085802
FrontPage 2003 Product Information:
http://www.microsoft.com/office/frontpage/prodinfo/default.mspx
Understanding FrontPage:
http://msdn.microsoft.com/office/understanding/frontpage/
FrontPage 2002 Server Extensions Support Center:
http://support.microsoft.com/default.aspx?scid=fh;en-us;fp10se
===
|I really like how Microsoft's FrontPage FAQ webpage works. When you click
| on the question, the answer is displayed below the question. You can then
| click on the question again to have the answer disappear. How is this
done?
| Is it possible to do this in FrontPage? I am using FrontPage2003.
|
| here is the link to MS FrontPage FAQ webpage....
| http://www.microsoft.com/office/frontpage/prodinfo/faq.mspx
|
|

 

[Zackery]

Tom,
THANKS for you unbelievably quick response. I'll check out your
suggestions.
Zee

 

[Murray]

You may bite off more than you can chew, however, by looking at that page -
so be careful not to hurt yourself!

Generally, that effect is done using the CSS style display:none|inline|block

You have the questions, and the answers underneath. The answers are
contained in a wrapper that is styled with display:none. This causes them
to not only be invisible, but to also not even take up any space on the
page. It would look like this (inline styles shown for clarity) -

<a href="....>Here is the question</a>
<div id="answer1" style="display:none">Here is the answer</div>

The question, when clicked, would toggle the value of that display style
using a custom javascript, e.g. (in pseudo-code) -

var clicked=0
function toggle(answer)
if not clicked set display:block
else set display:none
clicked = not (clicked)

or something like that - the value of clicked alternates from 0 to 1. Each
call would cause this value to cycle, which in turn would cause the display
value to cycle between block and none.

It becomes more complex when there are multiple questions and answers, but
that's the general drift.

 

[Jon Spivey]

Hi,
Probably the easiest way would be to make a style like this
<style type="text/css">
..answer{
display:none;
}
</style>
and then a script like this
<script type="text/javascript">
function showAnswer(a){
if(!document.getElementById)return;
var b=document.getElementsByTagName("DIV");
for(i=0;i<b.length;i++){
if(b.className=='answer')b.style.display=(b.id==a)?'block':'none';
}}
</script>

and then make your questions and answers like this
<a href="javascript:;" onclick="showAnswer('answer1');return
false;">Question 2</a>
<div class="answer" id="answer1">
the answer to question 1
</div>
<a href="javascript:;" onclick="showAnswer('answer2');return
false;">Question 2 </a>
<div class="answer" id="answer2">
the answer to question 2
</div>
etc.....

I've made the answers toggle so there's only one answer visible at a time
which seems more logical to me