CodingForums.com - FAQ Drop-Down A when Q is clicked?

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - FAQ Drop-Down A when Q is clicked? (http://www.codingforums.com/showthread.php?t=236311)

Squishy435

08-27-2011 08:17 PM

FAQ Drop-Down A when Q is clicked?

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 (Post 1129218)

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 (Post 1129218)

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 (Post 1129258)

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 (Post 1129258)

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>

All times are GMT +1. The time now is 12:36 PM.