Log in

View Full Version : Script for our FAQ page


iKerry
01-19-2012, 09:14 AM
I'm looking for a free script that will allow a visitor to click (or mouse over) a FAQ and the answer will pop up directly underneath it.

I expect to have about a dozen FAQS. Some of the answers might have 2-3 short sentences or even bulleted sentences.

For example:

1) How long does it take to do the tutorial?

When moused over the answer would appear below.

Approximately 2 hours:

There are 10 pages
Each page takes about 10 minutes to read.
Allow 15 minutes to post your feedback and comments


I use Expression Web 4.

Thanks,

Kerry
ankush
01-19-2012, 09:34 AM
try this, hope this is what you want


<html>
<head>
<title>faq</title>
<script language="javascript" type="text/javascript">
function over() {
document.getElementById('ans').style.display = "block";
}
function out() {
document.getElementById('ans').style.display = "none";
}

</script>
</head>

<body>
<a href="#" onmouseover="over();" onmouseout="out();">1) How long does it take to do the tutorial?</a>
<div id="ans" style="display:none;">
<ul>
<li>There are 10 pages</li>
<li>Each page takes about 10 minutes to read.</li>
<li>Allow 15 minutes to post your feedback and comments</li>

</ul>
</div>
</body>
</html>
ajfmrf
01-20-2012, 02:35 AM
Try this if you wish to



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<html>
<head>
<title>Click to see the answer</title>
<style>

.para {
font-family: "Verdana","Arial","sans-serif";
font-size: 10pt;
}

a.headings:link {
color: #000000;
text-decoration:underline;
width:100%;
}

a.headings:visited {
color: #aa6611;
width:100%
}

a.headings:hover {
color: #ff9933;
text-decoration:none;
width:100%
}

a.headings:active {
color: #0000ff;
width:100%
}

a.headings {
background-repeat: no-repeat;
font-family: "Verdana","arial","sans-serif";
font-size: 10px;
}

div.open {
width:600px;
border:2px solid red;
margin-top:40px;
margin-left:500px;
text-align:left;
padding-left:80px;

}

div.stuff {
width:500px;
margin-left:600px;
margin-top:40px;
}
</style>
<script type="text/javascript">
var subs_array = new Array("sub1","sub2","sub3");// Put the id's of your hidden divs in this array

function displaySubs(the_sub){
if (document.getElementById(the_sub).style.display==""){
document.getElementById(the_sub).style.display = "none";return
}
for (i=0;i<subs_array.length;i++){
var my_sub = document.getElementById(subs_array[i]);
my_sub.style.display = "none";
}
document.getElementById(the_sub).style.display = "";
}
</script>
</head>
<body>
<div class="open" >
<p><a href="javascript:void(0)" class="headings" onClick="displaySubs('sub1')" onFocus="if(this.blur)this.blur()";>

<strong>Click on this question and the hidden answer loads beneath the question</strong> </a> </p>

<div class="para" id="sub1" style="display:none">
number one---Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus.
</div>

<p><a href="javascript:void(0)" class="headings" onClick="displaySubs('sub2')" onFocus="if(this.blur)this.blur()";>

<strong>Here is question number two</strong> </a> </p>
<div class="para" id="sub2" style="display:none">

number-two,,,,Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.
</div>

<p><a href="javascript:void(0)" class="headings" onClick="displaySubs('sub3')" onFocus="if(this.blur)this.blur()";>

<strong>Click here for question number three</strong> </a> </p>
<div class="para" id="sub3" style="display:none">
three....Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam.
</div>

</div>


</body>
</html>


add more subs to the javascript to add to it (sub1,sub2,sub3 are already there so add from there sub4,sub5 etc....)
iKerry
01-21-2012, 10:13 AM
Hi ajfmrf and ankush,

Both are exactly what I am looking for.

I especially like yours ankush because of its mouse over. How do I add FAQ #2?

I tried


<a href="#" onmouseover="over();" onmouseout="out();">1) How long does it take to do the tutorial?</a>
</p>
<div id="ans" style="display:none;">
<ul>
<li>There are 10 pages</li>
<li>Each page takes about 10 minutes to read.</li>
<li>Allow 15 minutes to post your feedback and comments</li>

</ul>
</div>

<a href="#" onmouseover="over();" onmouseout="out();">1) How long does it take to do the tutorial?</a>
</p>
<div id="ans" style="display:none;">
<ul>
<li>There are 10 pages</li>
<li>Each page takes about 10 minutes to read.</li>
<li>Allow 15 minutes to post your feedback and comments</li>

</ul>
</div>
but when I mouse over the second question it flickers comcom121.org/csgp/faqs.htm

Thanks ever so much,

Kerry
ankush
01-21-2012, 11:16 AM
here you go


<html>
<head>
<title>faq</title>
<script language="javascript" type="text/javascript">
function over(ankush) {

document.getElementById(ankush.id).style.display = "block";
}
function out(ankush) {
document.getElementById(ankush.id).style.display = "none";
}

</script>
</head>
<body>
<a href="#" onmouseover="over(ans1)" onmouseout="out(ans1)">1) First Question</a>
<div id="ans1" style="display:none;">
<ul>
<li>first answer.... </li>
<li>first answer.... </li>
<li>first answer.... </li>
</ul>
</div>
<br /><br />
<a href="#" onmouseover="over(ans2)" onmouseout="out(ans2)">2) Second Question</a>
<div id="ans2" style="display:none;">
<ul>
<li>second answer...</li>
<li>second answer...</li>
<li>second answer...</li>
</ul>
</div>
<br /><br />
<a href="#" onmouseover="over(ans3)" onmouseout="out(ans3)">3) Third Question</a>
<div id="ans3" style="display:none;">
<ul>
<li>third answer...</li>
<li>third answer...</li>
<li>third answer...</li>
</ul>
</div>
</body>
</html>
iKerry
01-21-2012, 08:04 PM
Hi ankush and ajfmrf ,

Woo Woo ankush! That did it. Thanks so much.

Kerry
Vixeria
01-13-2016, 11:26 PM
here you go


<html>
<head>
<title>faq</title>
<script language="javascript" type="text/javascript">
function over(ankush) {

document.getElementById(ankush.id).style.display = "block";
}
function out(ankush) {
document.getElementById(ankush.id).style.display = "none";
}

</script>
</head>
<body>
<a href="#" onmouseover="over(ans1)" onmouseout="out(ans1)">1) First Question</a>
<div id="ans1" style="display:none;">
<ul>
<li>first answer.... </li>
<li>first answer.... </li>
<li>first answer.... </li>
</ul>
</div>
<br /><br />
<a href="#" onmouseover="over(ans2)" onmouseout="out(ans2)">2) Second Question</a>
<div id="ans2" style="display:none;">
<ul>
<li>second answer...</li>
<li>second answer...</li>
<li>second answer...</li>
</ul>
</div>
<br /><br />
<a href="#" onmouseover="over(ans3)" onmouseout="out(ans3)">3) Third Question</a>
<div id="ans3" style="display:none;">
<ul>
<li>third answer...</li>
<li>third answer...</li>
<li>third answer...</li>
</ul>
</div>
</body>
</html>

This code works great, but how do you change their colors? It would be really helpful!