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

Code:

<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

Code:

<!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

Code:

<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

Code:

<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

Originally Posted by ankush

here you go

Code:

<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!

Thread: Script for our FAQ page

Thread Tools

Search Thread

Script for our FAQ page

You could

A Little Color Help

Bookmarks

Bookmarks

Posting Permissions