|
||||
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> |
| |||
EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum
