FAQ Drop-Down A when Q is clicked?

Squishy435 · 08-27-2011, 08:17 PM

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?

Squishy435 · 08-27-2011, 10:21 PM

Quote:

Originally Posted by Squishy435

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 · 08-27-2011, 11: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 · 08-28-2011, 12:56 AM

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 · 08-28-2011, 01:35 AM

Quote:

Originally Posted by Squishy435

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 · 08-28-2011, 01:52 AM

Quote:

Originally Posted by jmrker

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 · 12-03-2012, 04:37 PM

Quote:

Originally Posted by jmrker

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 · 12-04-2012, 01:38 AM

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 · 12-04-2012, 01:54 AM

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>