Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question FAQ drop down, please help me?

    I am using the below script for a FAQ for a website I've created. I would like it to be set so that only one question can be opened at a time. In other words, if I press Q1, A1 drops down. Then when I press Q2 A2 drops down and A1 is hidden.

    <script type="text/javascript">
    function toggle(tag) {
    var x=document.getElementsByName(tag)[0];
    var a = x.parentNode
    if (a.style.display=='block'){
    a.style.display='none'
    }else{
    a.style.display='block'
    }
    }


    function init() {
    //this function will add show hide functionality to paired list items,
    //as long as the answer is a list item straight after the question list item.
    //You can also have as many separate lists as you want.
    //all lists must be contained within a div with id QA

    var obj = document.getElementById('QA');
    var elements = obj.getElementsByTagName('li');
    var index = 1
    //add javascript to question elements
    //you could also add styling to question elements here
    for (var i=0; i < elements.length; i+=2){
    var element = elements[i];
    element.innerHTML = "<a href='javascript:toggle(" + index + ")'>" + element.innerHTML + "</a>"
    index = index + 1
    }
    //add bookmark to answer elements and add styling
    var index = 1
    for (var i=1; i < elements.length; i+=2){
    var element = elements[i];
    element.innerHTML = "<a name='" + index + "' id='" + index + "'></a>" + element.innerHTML
    index = index + 1
    element.style.padding = '0px 0px 10px 20px' //add indent to answer
    element.style.listStyleType = 'none' //remove bullet
    element.style.display = 'none' //hide answer element
    }
    }


    window.onload = init;

    </script>

    <div id="QA">
    <ul style="list-style:none;">
    <li>Question</li>
    <li>Answer</li>
    </ul
    </div>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script type="text/javascript">
    function toggle(tag) {
     var x=document.getElementsByName(tag)[0],a = x.parentNode;
     toggle.lst&&toggle.lst!=a?toggle.lst.style.display='none':null;
     a.style.display=a.style.display=='block'?'none':'block';
     toggle.lst=a;
    }
    
    
    function init() {
    //this function will add show hide functionality to paired list items,
    //as long as the answer is a list item straight after the question list item.
    //You can also have as many separate lists as you want.
    //all lists must be contained within a div with id QA
    
    var obj = document.getElementById('QA');
    var elements = obj.getElementsByTagName('li');
    var index = 1
    //add javascript to question elements
    //you could also add styling to question elements here
    for (var i=0; i < elements.length; i+=2){
    var element = elements[i];
    element.innerHTML = "<a href='javascript:toggle(" + index + ")'>" + element.innerHTML + "</a>"
    index = index + 1
    }
    //add bookmark to answer elements and add styling
    var index = 1
    for (var i=1; i < elements.length; i+=2){
    var element = elements[i];
    element.innerHTML = "<a name='" + index + "' id='" + index + "'></a>" + element.innerHTML
    index = index + 1
    element.style.padding = '0px 0px 10px 20px' //add indent to answer
    element.style.listStyleType = 'none' //remove bullet
    element.style.display = 'none' //hide answer element
    }
    }
    
    
    window.onload = init;
    
    </script>
    
    <div id="QA">
    <ul style="list-style:none;">
    <li>Question</li>
    <li>Answer</li>
    <li>Question1</li>
    <li>Answer1</li>
    </ul
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by simon1993 View Post
    I am using the below script for a FAQ for a website I've created. I would like it to be set so that only one question can be opened at a time. In other words, if I press Q1, A1 drops down. Then when I press Q2 A2 drops down and A1 is hidden.
    Here's another version that uses a proper HTML structure. A description list (dl element) is a better choice for marking up a FAQ.

    https://patrick.dark.name/web.dev/cf...thread.295827/

    Code:
    <!doctype html>
    <html lang="en-US">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Demo for CodingForums.com Thread 295827</title>
    		<style>
    			* { margin: 0; padding: 0; }
    			html { font: 16px/1.4 sans-serif; background: white; color: black; }
    			#content { display: block; max-width: 1024px; overflow: auto; margin: 0 auto; background: #eee; }
    			#content h1 { margin: 2em 2em 0.75em; font: inherit; line-height: 1; }
    			#content h1 span { font-size: 150%; font-weight: bold; vertical-align: top; }
    			#faq { margin: 0.5em 2em 2em 3em; }
    			#faq dt { margin: 0.5em 0 0; font-weight: bold; }
    			#faq .visible { display: block; }
    			#faq .hidden { display: none; }
    		</style>
    		<script>
    			function show_one_hide_others() {
    				var context_element = document.getElementById("faq");
    				var topics = context_element.getElementsByTagName("dt");
    				var details = context_element.getElementsByTagName("dd");
    				var visible_details = details[0];
    				
    				// Make the first topicís details visible.
    				if (details[0].className === "") {
    					details[0].className = "visible";
    				}
    				else {
    					details[0].className += " visible";
    				}
    				
    				// Hide the details of the the second and all subsequent topics.
    				for (var i = 1; i < details.length; i++) {
    					if (details[i].className === "") {
    						details[i].className = "hidden";
    					}
    					else {
    						details[i].className += " hidden";
    					}
    				}
    
    				// Create an event listener for each topic that activates the show/hide behavior.
    				// If the topicís details are already visible, nothing will happen.
    				// Otherwise, the details for the visible topic is hidden, and the clicked topicís details are shown.
    				if (typeof topics[0].addEventListener === "function") {
    					for (var i = 0; i < topics.length; i++) {
    						topics[i].addEventListener("click", function () {
    							var pertinent_details = this.nextElementSibling;
    							if (/(?:^| )hidden(?: |$)/.test(pertinent_details.className) === true) {
    								visible_details.className = visible_details.className.replace(/(^| )visible( |$)/, ("\1" === " " ? "\1" : "") + "hidden" + ("\2" === " " ? "\2" : ""));
    								pertinent_details.className = pertinent_details.className.replace(/(^| ])hidden( |$)/, ("\1" === " " ? "\1" : "") + "visible" + ("\2" === " " ? "\2" : ""));
    								visible_details = pertinent_details;
    							}
    						}, false);
    					}
    				}
    				else { // WIE8
    					for (var i = 0; i < topics.length; i++) {
    						topics[i].attachEvent("onclick", (function (i) {
    							return function () {
    								var pertinent_details = topics[i].nextSibling;
    								if (/(?:^| )hidden(?: |$)/.test(pertinent_details.className) === true) {
    									visible_details.className = visible_details.className.replace(/(^| )visible( |$)/, ("\1" === " " ? "\1" : "") + "hidden" + ("\2" === " " ? "\2" : ""));
    									pertinent_details.className = pertinent_details.className.replace(/(^| ])hidden( |$)/, ("\1" === " " ? "\1" : "") + "visible" + ("\2" === " " ? "\2" : ""));
    									visible_details = pertinent_details;
    								}
    							}
    						})(i), false);
    					}
    				}
    			}
    			if (typeof document.addEventListener === "function") {
    				document.addEventListener("DOMContentLoaded", show_one_hide_others, false);
    			}
    			else { // WIE8
    				event_model = "attachEvent";
    				window.attachEvent("onload", show_one_hide_others);
    			}
    		</script>
    	</head>
    	<body>
    		<div id="content">
    			<h1><span>Frequently Asked Questions</span></h1>
    			<dl id="faq">
    				<dt>How do I do this?</dt>
    				<dd>You do this by doing that.</dd>
    				<dt>How do I do that?</dt>
    				<dd>You do that by doing this other thing.</dd>
    				<dt>Why do people ask such stupid questions?</dt>
    				<dd>No comment.</dd>
    			</dl>
    		</div>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    			* { margin: 0; padding: 0; }
    			html { font: 16px/1.4 sans-serif; background: white; color: black; }
    			#content { display: block; max-width: 1024px; overflow: auto; margin: 0 auto; background: #eee; }
    			#content h1 { margin: 2em 2em 0.75em; font: inherit; line-height: 1; }
    			#content h1 span { font-size: 150%; font-weight: bold; vertical-align: top; }
    			.qa { margin: 0.5em 2em 2em 3em; }
    			.qa dt { margin: 0.5em 0 0; font-weight: bold; }
    
    /*]]>*/
    </style></head>
    
    <body>
    		<div id="content">
    			<h1><span>Frequently Asked Questions</span></h1>
    			<dl id="faq" class="qa">
    				<dt>How do I do this?</dt>
    				<dd>You do this by doing that.</dd>
    				<dt>How do I do that?</dt>
    				<dd>You do that by doing this other thing.</dd>
    				<dt>Why do people ask such stupid questions?</dt>
    				<dd>No comment.</dd>
    			</dl>
                <br />
                <br />
    			<dl id="faq2" class="qa">
    				<dt>How do I do this?</dt>
    				<dd>You do this by doing that.</dd>
    				<dt>How do I do that?</dt>
    				<dd>You do that by doing this other thing.</dd>
    				<dt>Why do people ask such stupid questions?</dt>
    				<dd>No comment.</dd>
    			</dl>
    		</div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcQA={
    
     init:function(id,srt){
      var dl=document.getElementById(id),dt=dl.getElementsByTagName('DT'),dd=dl.getElementsByTagName('DD'),z0=0;
      this['zxc'+id]={};
      for (;z0<dt.length;z0++){
       if (dd[z0]){
        this.addevt(dt[z0],'mouseup','Toggle',id,dd[z0])
        dd[z0].style.display=z0!=srt?'none':'block';
        z0==srt?this['zxc'+id].lst=dd[z0]:null;
       }
      }
     },
    
     Toggle:function(id,dd){
      var o=this['zxc'+id];
      if (o&&dd){
       o.lst&&dd!=o.lst?o.lst.style.display='none':null;
       dd.style.display=dd.style.display=='none'?'block':'none';
       o.lst=dd;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
      }
     }
    
    
    
    
    }
    
    zxcQA.init('faq',0);
    zxcQA.init('faq2');
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Arbitrator (05-26-2013)

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    [...]
    I'm guessing the point of this code was to make a script that can be executed for multiple lists within a single document. I modified my script slightly to allow for this use case; it simply required changing the context_element variable into a parameter/argument. I was trying to write a generalized, copy-paste script, but apparently I missed that detail, so thanks for the notice. I also noticed that I left a variable assignment in there that I meant to delete. That was removed as well. The revised code is below.

    Also, since you went through the effort of writing a polyglot XHTML document, it's worth noting that your script fails when the document is serialized as application/xhtml+xml; your script references DD and DT elements, which do not exist in XHTML. Simply lowercasing the element names fixes the script.

    Revised Code:

    https://patrick.dark.name/web.dev/cf...thread.295827/

    Code:
    <!doctype html>
    <html lang="en-US">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Demo for CodingForums.com Thread 295827</title>
    		<style>
    			* { margin: 0; padding: 0; }
    			html { font: 16px/1.4 sans-serif; background: white; color: black; }
    			#content { display: block; max-width: 1024px; overflow: auto; margin: 0 auto; background: #eee; }
    			#content h1 { margin: 2em 2em 0.75em; font: inherit; line-height: 1; }
    			#content h1 span { font-size: 150%; font-weight: bold; vertical-align: top; }
    			#faq { margin: 0.5em 2em 2em 3em; }
    			#faq dt { margin: 0.5em 0 0; font-weight: bold; }
    			#faq .visible { display: block; }
    			#faq .hidden { display: none; }
    		</style>
    		<script>
    			function show_one_hide_others(context_element) {
    				var topics = context_element.getElementsByTagName("dt");
    				var details = context_element.getElementsByTagName("dd");
    				var visible_details = details[0];
    				
    				// Make the first topic’s details visible.
    				if (details[0].className === "") {
    					details[0].className = "visible";
    				}
    				else {
    					details[0].className += " visible";
    				}
    				
    				// Hide the details of the the second and all subsequent topics.
    				for (var i = 1; i < details.length; i++) {
    					if (details[i].className === "") {
    						details[i].className = "hidden";
    					}
    					else {
    						details[i].className += " hidden";
    					}
    				}
    
    				// Create an event listener for each topic that activates the show/hide behavior.
    				// If the topic’s details are already visible, nothing will happen.
    				// Otherwise, the details for the visible topic is hidden, and the clicked topic’s details are shown.
    				if (typeof topics[0].addEventListener === "function") {
    					for (var i = 0; i < topics.length; i++) {
    						topics[i].addEventListener("click", function () {
    							var pertinent_details = this.nextElementSibling;
    							if (/(?:^| )hidden(?: |$)/.test(pertinent_details.className) === true) {
    								visible_details.className = visible_details.className.replace(/(^| )visible( |$)/, ("\1" === " " ? "\1" : "") + "hidden" + ("\2" === " " ? "\2" : ""));
    								pertinent_details.className = pertinent_details.className.replace(/(^| ])hidden( |$)/, ("\1" === " " ? "\1" : "") + "visible" + ("\2" === " " ? "\2" : ""));
    								visible_details = pertinent_details;
    							}
    						}, false);
    					}
    				}
    				else { // IE8
    					for (var i = 0; i < topics.length; i++) {
    						topics[i].attachEvent("onclick", (function (i) {
    							return function () {
    								var pertinent_details = topics[i].nextSibling;
    								if (/(?:^| )hidden(?: |$)/.test(pertinent_details.className) === true) {
    									visible_details.className = visible_details.className.replace(/(^| )visible( |$)/, ("\1" === " " ? "\1" : "") + "hidden" + ("\2" === " " ? "\2" : ""));
    									pertinent_details.className = pertinent_details.className.replace(/(^| ])hidden( |$)/, ("\1" === " " ? "\1" : "") + "visible" + ("\2" === " " ? "\2" : ""));
    									visible_details = pertinent_details;
    								}
    							}
    						})(i), false);
    					}
    				}
    			}
    			if (typeof document.addEventListener === "function") {
    				document.addEventListener("DOMContentLoaded", function () {
    					show_one_hide_others(document.getElementById("faq"));
    				}, false);
    			}
    			else { // IE8
    				window.attachEvent("onload", function () {
    					show_one_hide_others(document.getElementById("faq"));
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div id="content">
    			<h1><span>Frequently Asked Questions</span></h1>
    			<dl id="faq">
    				<dt>How do I do this?</dt>
    				<dd>You do this by doing that.</dd>
    				<dt>How do I do that?</dt>
    				<dd>You do that by doing this other thing.</dd>
    				<dt>Why do people ask such stupid questions?</dt>
    				<dd>No comment.</dd>
    			</dl>
    		</div>
    	</body>
    </html>
    [code]
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •