...

View Full Version : 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
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 ...


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



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


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



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



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


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


<!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
10-15-2013, 08: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
10-15-2013, 02:17 PM
Change the width of the UL in:


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


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


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


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


<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. :eek:

Something like this:


<!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
10-16-2013, 04:43 PM
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
10-16-2013, 09:43 PM
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
10-17-2013, 07: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
10-17-2013, 03:24 PM
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.

ent20
01-03-2014, 02:30 PM
Hello and thanks for this - really useful! I'd like to remove the lines dividing the FAQs but can't see where they feature in the code - could you point me in the right direction please?

DaveyErwin
01-03-2014, 02:35 PM
remove the border style ...


.FAQ { cursor:pointer; border-bottom:1px solid black; }

GrumpyPig
10-14-2014, 08:30 PM
<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" onclick="toggle('faq1',this)">
<img src="images/plus.png">
Whassup?
<div id="faq1" class="FAA">Nadda</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 = "images/plus.png";
} else {
pic.src = "http://i352.photobucket.com/albums/r360/hypnic_imp/tinyicons/splashy/remove_minus_sign.png";
}
}
</script>
</body>
</html>
</code>

I just found this discussion while needing a solution for an interactive Q & A list myself. I'm trying to make use of the unordered list approach provided by jmrker (Thank you very much, BTW), and have made a few simple changes (reflected in the code above and noted below), but these changes appear to have broken the javascript that toggles the plus/minus image.

Modifications I have made:
1. I replaced the broken "plus.jpg" link with a local image "image/plus.png" (which will still not resolve when you try it). When testing after making this change the javascript toggle still worked.
2. I moved the "onclick" argument from the "img" tag to the "li" tag to make a larger click target out of the text instead of just the image. Upon making this change, the "plus" image no longer changes to "minus" when the click activates the drop down answer. How do I fix this?

GrumpyPig
10-14-2014, 08:33 PM
<!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" onclick="toggle('faq1',this)">
<img src="images/plus.png">
Whassup?
<div id="faq1" class="FAA">Nadda</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 = "images/plus.png";
} else {
pic.src = "http://i352.photobucket.com/albums/r360/hypnic_imp/tinyicons/splashy/remove_minus_sign.png";
}
}
</script>
</body>
</html>


I just found this discussion while needing a solution for an interactive Q & A list myself. I'm trying to make use of the unordered list approach provided by jmrker (Thank you very much, BTW), and have made a few simple changes (reflected in the code above and noted below), but these changes appear to have broken the javascript that toggles the plus/minus image.

Modifications I have made:
1. I replaced the broken "plus.jpg" link with a local image "image/plus.png" (which will still not resolve when you try it). When testing after making this change the javascript toggle still worked.
2. I moved the "onclick" argument from the "img" tag to the "li" tag to make a larger click target out of the text instead of just the image. Upon making this change, the "plus" image no longer changes to "minus" when the click activates the drop down answer. How do I fix this?

jmrker
10-15-2014, 03:03 AM
I don't know if you have the "plus.jpg" in a subdirectory under the placement of your source code (images/filename.png),
but it does not seem to be in the same place as your "remove-minus-sign.png" image in the photobucket site.

My original post used the photobucket images provided by the original OP, but they seem to have been moved or deleted.

So, to avoid using any images (+ or - .jpg or .png), I modified the code to use just normal ASCII characters of + and -
with some additional CSS modifications to make them bigger and bolder.

Now you can click anywhere within the horizontal lines and the section will expand and compress with the proper + or - symbol.
And you don't need to wait for the images to load (although these images, in particular, have only a small band-width).



<!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; }
.MoreLess { font-size:3em; font-weight:bold; color:red; }
</style>

</head>
<body>
<h2>FAQ section</h2>
<div id="wrapper">
<ul id="FAQlist" style="width:100%">
<li class="FAQ" onclick="toggle('faq1',this)">
<span id="faq1Char" class='MoreLess'>+</span> Whassup?
<div id="faq1" class="FAA">Nadda</div>
</li>

<li class="FAQ" onclick="toggle('faq2',this)">
<span id="faq2Char" class='MoreLess'>+</span> Whassup now?
<div id="faq2" class="FAA">Still nadda</div>
</li>

<li class="FAQ" onclick="toggle('faq3',this)">
<span id="faq3Char" class='MoreLess'>+</span> 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)">
<span id="faq4Char" class='MoreLess'>+</span> ?Que pasa?
<div id="faq4" class="FAA">Nothing in a different language.</div>
</li>
</ul>
</div>

<script type="text/javascript">
// Modified from: http://codingforums.com/javascript-programming/236311-faq-drop-down-when-q-clicked-2.html

function toggle(Info,pic) {
var CState = document.getElementById(Info);
CState.style.display = (CState.style.display != 'block') ? 'block' : 'none';
if (CState.style.display == 'none') { document.getElementById(Info+'Char').innerHTML = '+'; }
else { document.getElementById(Info+'Char').innerHTML = '-'; }
}
</script>
</body>
</html>


Note also that the onclick event was never in the image. It is in the <li> sections.

GrumpyPig
10-15-2014, 10:01 PM
Nice. That will work great for my application. Thanks for the quick reply. Someday I'll have to learn some of that magic that is Javascript.

jmrker
10-16-2014, 02:52 AM
Nice. That will work great for my application. Thanks for the quick reply. Someday I'll have to learn some of that magic that is Javascript.

You're most welcome.
Happy to help.
Good Luck!
:)

jmrker
10-17-2014, 02:34 AM
I looked at my posting again and decided I did not like the implementation.
It did not allow me to put in any other links/buttons and such in the hidden sections without hiding the entire section again.
I also removed the dependency on the LI and DIV tags in favor of the DT and DD tags. Looks a bit cleaner to code to me.

Here is a modification you can consider that shows an anchor tag in the 3rd FAQ/FAA display.
It also allows the use of the TAB and Shift-TAB key to move between the selections and use the ENTER key to toggle the displays.



<!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; }
.FAA { display:none; border-bottom:medium solid red; }
.MoreLess { font-size:3em; font-weight:bold; color:red; }
</style>

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

<dl id="FAQlist" style="width:50%">

<dt class="FAQ" onclick="toggle('faq1')" onkeypress="checkEnter(event,'faq1')" tabindex="1">
<span id="faq1Char" class='MoreLess'>+</span> Whassup?
</dt>
<dd id="faq1" class="FAA">Nadda</dd>

<dt class="FAQ" onclick="toggle('faq2')" onkeypress="checkEnter(event,'faq2')" tabindex="2">
<span id="faq2Char" class='MoreLess'>+</span> Whassup now?
</dt>
<dd id="faq2" class="FAA">Still nadda</dd>

<dt class="FAQ" onclick="toggle('faq3')" onkeypress="checkEnter(event,'faq3')" tabindex="3">
<span id="faq3Char" class='MoreLess'>+</span> How about now?
</dt>
<dd id="faq3" class="FAA">How many times must I say
<b><a href="http://www.google.com/">nothing</a></b>?</dd>

<dt class="FAQ" onclick="toggle('faq4')" onkeypress="checkEnter(event,'faq4')" tabindex="4">
<span id="faq4Char" class='MoreLess'>+</span> ?Que pasa?
</dt>
<dd id="faq4" class="FAA">Nothing in a different language.</dd>

</dl>

<script type="text/javascript">
// Modified from: http://codingforums.com/javascript-programming/236311-faq-drop-down-when-q-clicked-2.html
// Modified again for ability to link somewhere in answer section of FAQ
// and added TAB and ENTER to show/hide FAA sections

function toggle(Info) {
var CState = document.getElementById(Info);
CState.style.display = (CState.style.display != 'block') ? 'block' : 'none';
if (CState.style.display == 'none') { document.getElementById(Info+'Char').innerHTML = '+'; }
else { document.getElementById(Info+'Char').innerHTML = '-'; }
}

// Following from: http://stackoverflow.com/questions/12788554/onkeypress-enter-event-not-firing
function checkEnter(evt,IDS) { if (evt.keyCode === 13) { toggle(IDS); } } // Handle key press event here

</script>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum