Announcement

**Squishy435** · Aug 27, 2011, 05:21 PM

Originally posted by Squishy435 View Post

Hi everyone - I was wondering how it would be possible for me to create a FAQ with drop-down answers when the question is clicked?

For example: https://www.facebook.com/help/?page=1145

Facebook has something like that available.

Any ideas?

Here is another example that I managed to find: http://www.thereconnection.com/faq

**DaveyErwin** · Aug 27, 2011, 06:05 PM

here's something to get you started ...

Code:

<HTML>
<BODY>
<DIV STYLE="cursor:hand;cursor:pointer"
onclick="document.getElementById('hidden').style.display='inline'"
>whassup?
</DIV>
<div id="hidden" style="display:none">nadda<br></div>
hiyas
</BODY>
</HTML>

**jmrker** · Aug 27, 2011, 07:56 PM

Slight modification from last post to include a bit more JS and some CSS.

Only advantage is that click on question box shows/hides the answer
and the box makes it easier to know where to put cursor for mouse click.

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> FAQ Display </title>
<style type="text/css">
 .FAQ { cursor:hand; cursor:pointer;
        border:1px solid red; width:50%; }
 .FAA { display:none; }
</style>
<script type="text/javascript">
function toggle(Info) {
  var CState = document.getElementById(Info);
  CState.style.display = (CState.style.display != 'block')
                       ? 'block' : 'none';
}
</script>
</head>
<body>
<h2>FAQ section</h2>

<DIV class="FAQ" onclick="toggle('faq1')">
 whassup?
 <div id="faq1" class="FAA">nadda</div>
</DIV>

<DIV class="FAQ" onclick="toggle('faq2')">
 whassup now?
 <div id="faq2" class="FAA">still nadda</div>
</DIV>

<DIV class="FAQ" onclick="toggle('faq3')">
 How about now?
 <div id="faq3" class="FAA">How many times must I say <b>nothing</b>?</div>
</DIV>

</body>
</html>

**webdev1958** · Aug 27, 2011, 08:35 PM

Originally posted by Squishy435 View Post

For example: https://www.facebook.com/help/?page=1145

Facebook has something like that available.

This has the up/down arrows functionality like on Fb.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            ul {
                list-style-type: none
            }
            .more_content {
                margin: 10px 0px 0px 50px;
                padding: 5px 5px 5px 5px;
                width: 200px;
                height: 100px;
                border: 1px solid black;
                overflow: auto;
                display: none
            }
            span {
                padding: 0px 0px 0px 50px;
            }
            span:hover {
                cursor: pointer;
            }
        </style>
        <script type="text/javascript">
            function showHideMore(obj) {
                var contObj = obj.parentNode.getElementsByTagName('div')[0];
                var status = (contObj.style.display == 'block')? 'none' : 'block'
                contObj.style.display = status;
                obj.innerHTML = (status == 'block')? 'Show less' : 'Show more';
                obj.curPic = (obj.curPic == 0)? 1 : 0;
                obj.style.backgroundImage = 'url("'+plusMinusPics[obj.curPic]+'")';
            }
            window.onload=function(){
                plusMinusPics = ['plus.png','minus.png'];
                oMoreLessSpans = document.getElementById('list1').getElementsByTagName('span');
                for(i=0; i < oMoreLessSpans.length; i++){
                    oMoreLessSpans[i].curPic = 0;
                    oMoreLessSpans[i].style.background = 'url("'+plusMinusPics[oMoreLessSpans[i].curPic]+'") no-repeat 0 50%';
                    oMoreLessSpans[i].onclick=function(){showHideMore(this);}
                }
            }
        </script>
    </head>
    <body>
        <div>
            <ul id="list1">
                <li>
                    <div>
                        <span>Show more</span>
                        <div class="more_content">More 1 content</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span>Show more</span>
                        <div class="more_content">More 2 content</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span>Show more</span>
                        <div class="more_content">More 3 content</div>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>

**Squishy435** · Aug 27, 2011, 08:52 PM

Originally posted by jmrker View Post

Slight modification from last post to include a bit more JS and some CSS.

Only advantage is that click on question box shows/hides the answer
and the box makes it easier to know where to put cursor for mouse click.

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> FAQ Display </title>
<style type="text/css">
 .FAQ { cursor:hand; cursor:pointer;
        border:1px solid red; width:50%; }
 .FAA { display:none; }
</style>
<script type="text/javascript">
function toggle(Info) {
  var CState = document.getElementById(Info);
  CState.style.display = (CState.style.display != 'block')
                       ? 'block' : 'none';
}
</script>
</head>
<body>
<h2>FAQ section</h2>

<DIV class="FAQ" onclick="toggle('faq1')">
 whassup?
 <div id="faq1" class="FAA">nadda</div>
</DIV>

<DIV class="FAQ" onclick="toggle('faq2')">
 whassup now?
 <div id="faq2" class="FAA">still nadda</div>
</DIV>

<DIV class="FAQ" onclick="toggle('faq3')">
 How about now?
 <div id="faq3" class="FAA">How many times must I say <b>nothing</b>?</div>
</DIV>

</body>
</html>

This is probably more like that I'm looking for. Thank you very much. Just a little modifications that I have to make, and then I should be good to go.

**Markymark74** · Dec 3, 2012, 11:37 AM

Originally posted by jmrker View Post

Slight modification from last post to include a bit more JS and some CSS.

Only advantage is that click on question box shows/hides the answer
and the box makes it easier to know where to put cursor for mouse click.

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> FAQ Display </title>
<style type="text/css">
 .FAQ { cursor:hand; cursor:pointer;
        border:1px solid red; width:50%; }
 .FAA { display:none; }
</style>
<script type="text/javascript">
function toggle(Info) {
  var CState = document.getElementById(Info);
  CState.style.display = (CState.style.display != 'block')
                       ? 'block' : 'none';
}
</script>
</head>
<body>
<h2>FAQ section</h2>

<DIV class="FAQ" onclick="toggle('faq1')">
 whassup?
 <div id="faq1" class="FAA">nadda</div>
</DIV>

<DIV class="FAQ" onclick="toggle('faq2')">
 whassup now?
 <div id="faq2" class="FAA">still nadda</div>
</DIV>

<DIV class="FAQ" onclick="toggle('faq3')">
 How about now?
 <div id="faq3" class="FAA">How many times must I say <b>nothing</b>?</div>
</DIV>

</body>
</html>

How do i add the plus and minus images to this?

**jmrker** · Dec 3, 2012, 08:38 PM

You should substitute you own images (and path)

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> FAQ Display </title>
<style type="text/css">
 .FAQ { cursor:hand; cursor:pointer;
        border:1px solid red; width:25%; }
 .FAA { display:none; }
</style>
<script type="text/javascript">
function toggle(Info,pic) {
  var CState = document.getElementById(Info);
  CState.style.display = (CState.style.display != 'block') ? 'block' : 'none';
// alert(CState.style.display+'\n'+pic.src);
  if (CState.style.display == 'none') {
    pic.src = "http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg";
  } else {
    pic.src = "http://i352.photobucket.com/albums/r360/hypnic_imp/tinyicons/splashy/remove_minus_sign.png";
  }
}
</script>
</head>
<body>
<h2>FAQ section</h2>

<DIV class="FAQ">
 <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq1',this)"> 
 whassup?
 <div id="faq1" class="FAA">nadda</div>
</DIV>

<DIV class="FAQ">
 <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq2',this)"> 
 whassup now?
 <div id="faq2" class="FAA">still nadda</div>
</DIV>

<DIV class="FAQ">
 <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq3',this)"> 
 How about now?
 <div id="faq3" class="FAA">How many times must I say <b>nothing</b>?</div>
</DIV>

</body>
</html>

**jmrker** · Dec 3, 2012, 08:54 PM

Another version with <li> tags instead of <div>
Modified CSS for fun.

Code:

<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html>
<head>
<title> FAQ Display </title>
<style type="text/css">
 .FAQ { cursor:hand; cursor:pointer; }
 .FAA { display:none; }
 #FAQlist li { list-style-type: none; }
 #FAQlist ul { margin-left:0px; }
</style>

</head>
<body>
<h2>FAQ section</h2>

<ul id="FAQlist" style="width:33%">
 <li class="FAQ">
  <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq1',this)"> 
  Whassup?
  <div id="faq1" class="FAA">Nadda</div>
  <hr>
 </li>

 <li class="FAQ">
  <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq2',this)"> 
  Whassup now?
  <div id="faq2" class="FAA">Still nadda</div>
  <hr>
 </li>

 <li class="FAQ">
  <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq3',this)"> 
  How about now?
  <div id="faq3" class="FAA">How many times must I say <b>nothing</b>?</div>
  <hr>
 </li>

 <li class="FAQ">
  <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg" onclick="toggle('faq4',this)"> 
  ?Que pasa?
  <div id="faq4" class="FAA">Nothing in a different language.</div>
  <hr>
 </li>
</ul>

<script type="text/javascript">
function toggle(Info,pic) {
  var CState = document.getElementById(Info);
  CState.style.display = (CState.style.display != 'block') ? 'block' : 'none';
  if (CState.style.display == 'none') {
    pic.src = "http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg";
  } else {
    pic.src = "http://i352.photobucket.com/albums/r360/hypnic_imp/tinyicons/splashy/remove_minus_sign.png";
  }
}
</script>
</body>
</html>

**russ2204** · Oct 15, 2013, 03:51 AM

This is great.

What do I need to add to the code to ensure the page expands when questions are clicked on - currently, the dropdowns work but the page does not expand, so the answers gradually start overlapping the footer of the page etc.

Also, currently you can only click on the actual + sign - how do I get it so you can click on any part of the question and the answer drops down ?

Thanks

**jmrker** · Oct 15, 2013, 09:17 AM

Change the width of the UL in:

Code:

<ul id="FAQlist" style="width:33%">

Change where onclick event is called from <img> tag to the <li> tag

Code:

 <li class="FAQ" onclick="toggle('faq1',this)">

Wrap you entire menu above your footer code (which you did not and have not provided).

Code:

<body>
<h2>FAQ section</h2>
<div id="wrapper">

...

</ul>
</div>

More questions? Show the code you are using or provide a link to see what the problem is.

Something like this:

Code:

<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html>
<head>
<title> FAQ Display </title>
<style type="text/css">
 .FAQ { cursor:pointer; border-bottom:1px solid black; }
 .FAA { display:none; }
 #FAQlist li { list-style-type: none; }
 #FAQlist ul { margin-left:0px; }
</style>

</head>
<body>
<h2>FAQ section</h2>
<div id="wrapper">
<ul id="FAQlist" style="width:100%">
 <li class="FAQ" onclick="toggle('faq1',this)">
  <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg"> 
  Whassup?
  <div id="faq1" class="FAA">Nadda</div>
 </li>

 <li class="FAQ" onclick="toggle('faq2',this)">
  <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg"> 
  Whassup now?
  <div id="faq2" class="FAA">Still nadda</div>
 </li>

 <li class="FAQ" onclick="toggle('faq3',this)">
  <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg"> 
  How about now?
  <div id="faq3" class="FAA">How many times must I say <b>nothing</b>?</div>
 </li>

 <li class="FAQ" onclick="toggle('faq4',this)">
  <img src="http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg"> 
  ?Que pasa?
  <div id="faq4" class="FAA">Nothing in a different language.</div>
 </li>
</ul>
</div>

<script type="text/javascript">
function toggle(Info,pic) {
  var CState = document.getElementById(Info);
  CState.style.display = (CState.style.display != 'block') ? 'block' : 'none';
  if (CState.style.display == 'none') {
    pic.src = "http://i40.photobucket.com/albums/e244/jookah_1/plus.jpg";
  } else {
    pic.src = "http://i352.photobucket.com/albums/r360/hypnic_imp/tinyicons/splashy/remove_minus_sign.png";
  }
}
</script>
</body>
</html>

**russ2204** · Oct 16, 2013, 11:43 AM

Thanks

currently you can only click on the actual + sign - how do I get it so you can click on any part of the question and the answer drops down ?

**jmrker** · Oct 16, 2013, 04:43 PM

Originally posted by russ2204 View Post

Thanks

currently you can only click on the actual + sign - how do I get it so you can click on any part of the question and the answer drops down ?

Works fine for me in FF.
Will test later in MSIE.

What browser are you using?

**russ2204** · Oct 17, 2013, 02:59 AM

The drop down list works fine - it's just that rather than clicking the plus button I want to be able to select any part of the question.

**jmrker** · Oct 17, 2013, 10:24 AM

Originally posted by russ2204 View Post

The drop down list works fine - it's just that rather than clicking the plus button I want to be able to select any part of the question.

Sorry, but I don't understand the problem.
What do you mean by "any part of the question"?
When I click on the plus or the sentence (either one), it does display the response.
When I click on either the '+' or the sentence again, the response goes away as expected.

Can you give an example (verbal or graphics) of the problem you are having?
Also show the version of the script you are currently using that is giving you fits.

Announcement

FAQ Drop-Down A when Q is clicked?

FAQ Drop-Down A when Q is clicked?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment