Full version: jsB@nk » Menu » Clock » Expanding Question/Answer Script
URL: https://www.javascriptbank.com/expanding-questionanswer-script.html
This JavaScript creates expandable/collapsable elements for use in Question & Answer pages.
Full version: jsB@nk » Menu » Clock » Expanding Question/Answer Script
URL: https://www.javascriptbank.com/expanding-questionanswer-script.html
<style type="text/css">a, a:visited, a:active {font-size:10pt;font-weight:normal;font-family:sans-serif;color:black;text-decoration:underline;}a:hover {font-size:10pt;font-weight:normal;font-family:sans-serif;color:red;text-decoration:none;}body{font-size:10pt;font-weight:normal;font-family:sans-serif;color:black;background-color:rgb(255,255,255);}pre, .pre {font-size:10pt;font-weight:normal;font-style:arial;color:black;}.question {cursor:default;display:block;font-size:12pt;font-family:serif;color:black;font-weight:bold;}.answer {display:none;color:#00326d;font-size:10pt;font-family:sans-serif;padding: 2 0 5 0;}.container{display:block;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript" type="text/javascript" title="qa.js">var ids=new Array();function QAinit(){if(document.getElementById){var tids=document.getElementsByTagName('div');for(i=0;i<tids.length;i++)if(tids[i].className=="question")ids[ids.length]=tids[i];for(i=0;i<ids.length;i++)ids[i].onmouseup=setstate;}}function setstate(){for(i=0;i<ids.length;i++){if(ids[i]==this){var d=this.parentNode.getElementsByTagName('div')[1];if(d.style.display=="block")d.style.display="none";else d.style.display="block";}}}function expandall(){if(document.getElementById){for(i=0;i<ids.length;i++)ids[i].parentNode.getElementsByTagName('div')[1].style.display="block";}}function collapseall(){if(document.getElementById){for(i=0;i<ids.length;i++)ids[i].parentNode.getElementsByTagName('div')[1].style.display="none";}}window.onload=QAinit;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><a href="javascript:expandall()">Expand all</a> | <a href="javascript:collapseall()">Collapse all</a><br><br> <div class="container"><div class="question"><b>Q:</b> What does this script do?</div> <div class="answer"> <b>A:</b> It provides a collapsable/expandable interface. The only answers the user sees are the ones they want. It also keep your page clean-looking and helps minimize scrolling for long lists. </div></div> <div class="container"><div class="question"><b>Q:</b> How do I use it?</div> <div class="answer"> <b>A:</b> Just click on the question once and the answer will expand. Click on the question again and the answer will collapse. There is a provision in the script to expand or collapse all the answers at once, which is explained later on below. </div></div> <div class="container"><div class="question"><b>Q:</b> How do I install it?</div> <div class="answer"> <b>A:</b> Basically, follow these steps:<br> <ol> <li>Paste a few lines of style-sheet code into the HEAD section of your page:<pre> <style type="text/css"> .question { cursor:default; display:block; width:500px; } .answer { display:none; width:500px; padding: 2 0 5 0; } .container{ display:block; } </style></pre> You can add other style attributes such as font in there too. You can change the settings in the styles above, but these give the best look.<br><br> <li>Copy the file "qa.js" to your server and add the following line to the HEAD section of your page:<pre> <script language="javascript" type="text/javascript" src="qa.js"></script></pre> <li>Every question/answer pair needs 3 seperate <DIV> elements; the question container, the answer container, and another container that "holds" both of them. Basically, the structure is like this:<pre> <div class="container"> <div class="question"> Your question goes here... </div> <div class="answer"> Your answer goes here... </div> </div></pre> The class names are the ones in the style-sheet code in step 1.<br><br> </ol> You can "nest" these elements so you can have question/answer pairs that only appear when a certain answer is shown, but it gets a little tough to explain. Basically, (if you're brave) just create another 3 element set inside the answer element. You can multi-nest as much as you like, the script will still know which one to expand. Just don't come crying to me if your page's code gets confusing. :) </div></div> <div class="container"><div class="question"><b>Q:</b> Can I expand all the questions at once?</div> <div class="answer"> <b>A:</b> Yes! There are provisions to expand and collapse all of them at once. There are two javascript functions: <span class="pre">expandall()</span> and <span class="pre">collapseall()</span>. You can use them like any other link, see the example below:<pre> <a href="javascript:expandall()">Expand All</a> <a href="javascript:collapseall()">Collapse All</a></pre> This is how the links near the top of the page work. </div></div> <div class="container"><div class="question"><b>Q:</b> What browsers does this script work in?</div> <div class="answer"> <b>A:</b> This script ONLY works in "standards" compliant browsers such as Netscape 6+ and Internet Explorer 5+. It should not cause errors in older browsers, it just will not function. </div></div> <div class="container"><div class="question"><b>Q:</b> Anything else?</div> <div class="answer"> <b>A:</b> Yes, there are a few things to consider: <ol> <li>Do not use the class names explained earlier anywhere else in your page or you'll get some weird effects or errors. This is because the script hunts down all DIV elements with a classname of "question", it then sets mouse events to expand/collapse its sister DIV (class name "answer"). So, if the format explained earlier isn't followed, the script will generate errors.<br><br> <li>This script uses the "window.onload" event handler. If you have another script on your page that sets this event, then only one will work. You can find more information on how to overcome this issue at my <a href="http://scriptasylum.com/faqpage.html" target="_blank">FAQ page</a>, just scroll down to the appropriate section.<br><br> <li>You can have the answers shown by default by changing the value <span class="pre">none</span> to <span class="pre">block</span> in the <span class="pre">display:</span> portion of the <span class="pre">.answer</span> stylesheet declaration. </div></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->