如何在点击另一个时折叠打开的常见问题解答？

Question

I currently have the following code to make my FAQ buttons appear with the answer hidden until it is clicked. On click it shows the answer, but it leaves the answer expanded for each question when you click on another which eventually becomes way too long for the page as well as just being too much text on the page.

<script type="text/javascript">
function toggleMe(a){

var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

<input type="button"  onclick="return toggleMe('para1');" value="Question 1" class="buttonClass"><br>
<div class="button" id="para1" style="display:none" >

<br>Stupid, long answer
</div>
<br>
<input type="button" onclick="return toggleMe('para2')" value="Question 2" class="buttonClass"><br>
<div class="button" id="para2" style="display:none" >
<br>
Stupid, long answer 2
</div>
<br>

What I would like to happen is that when question1 is expanded and you click on another question, it not only expands that question, but would collapse question1.

TIA

Answer 1

Since all the answers have the class button ,you can hide the all divs with class button first and then run the rest of your code.

function toggleMe(a){
 //Collapse all answers
   var elements=document.getElementsByClassName("button");
   for (var i=0;i<elements.length;i+=1){
    elements[i].style.display = 'none';
   }
 //Toggle a particular answer
 var e=document.getElementById(a);
 if(!e) return true;
 if(e.style.display=="none"){
  e.style.display="block"
 }
 else{
  e.style.display="none"
 }
 return true;   
}

It iteratively sets the display:none property to all the divs with class button .

Answer 2

I would rather than writing code for you like to give general idea. This could be achieved by following steps:

1. Make all your answer divs marked with some class say answer.

2. Now, as all the divs are hidden for the first time. Rather than display:none. Use a css class hide-answer to avoid repeating code.

    .hide-answer{ display:none } 

3. Now bind on answers div an onclick event. you could do this either by onclick element in div or use standard class name to manipulate dom and bind onclick event. The onclick javascript call method is suppose toggleDivs()

4. toggleDivs method should wisely set clicked questions class to show-answer which is like below:

     .show-answer{ display:block; } 

And any other div with class show-answer to hide-answer .

Reason for generalised steps it to let you try it out and learn more out of it.

Hope it helps!

Answer 3

I think you might want to add a function in your script like:

function collapse_all(){
  var answers = document.getElementsByClassName("button");
  for (var j = 0; j < answers.length; j++) {
    answers[j].style.display="none";
  }
  return true;
}

And then a function that calls the two functions in sequence, collapsing everything before opening a new answer:

function open_answer(question){
    collapse_all();
    return toggleMe(question);
}

And then call that function from your HTML:

<input type="button"  onclick="return open_answer('para1');" value="Question 1" class="buttonClass">