Advanced Search

Results 1 to 6 of 6

Thread: Script for our FAQ page

  1. #1
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Script for our FAQ page

    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

  2. #2
    Join Date
    Jan 2012
    Location
    India
    Posts
    43
    Thanks
    12
    Thanked 1 Time in 1 Post

    Default

    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>

  3. #3
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    586
    Thanks
    41
    Thanked 27 Times in 27 Posts

    Default You could

    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....)
    Thanks,

    Bud

  4. #4
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by jscheuer1; 01-21-2012 at 09:54 AM. Reason: Format

  5. #5
    Join Date
    Jan 2012
    Location
    India
    Posts
    43
    Thanks
    12
    Thanked 1 Time in 1 Post

    Default

    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>

  6. #6
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi ankush and ajfmrf ,

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

    Kerry

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •