How do I collapse the open FAQ when clicking on another?

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

Possible duplicate of [What code do i need to collapse a div when another is open?](http://stackoverflow.com/questions/5148075/what-code-do-i-need-to-collapse-a-div-when-another-is-open) — Vinay Prajapati, Jan 14 '16 at 04:38

phpcoderx · Accepted Answer · 2016-01-14T05:20:42.627

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.

edited Jan 14 '16 at 05:20

answered Jan 14 '16 at 04:47

phpcoderx

570
5
16

I added the code you suggested to my javascript as follows: `` Now when I click a question it does not expand to show the answer at all. Have I put this in the wrong spot? – Derrick Potter Jan 14 '16 at 04:52
@DerrickPotter You seem to have misunderstood,let me post the entire code. – phpcoderx Jan 14 '16 at 04:55
That makes more sense... Thank you. I put that code in changing `var elements=document.getElementsByClassName("button");` to `var elements=document.getElementsByClassName("buttonClass");` but now when i click a question button all of the question buttons disappear. Thank you for your patience. I'm pretty new to all of this. – Derrick Potter Jan 14 '16 at 05:01
I'm an idiot... I see why you were using `button` instead of `buttonClass` now and understand why it was hiding all of my buttons. `buttonClass` is the div for the actual button. `button` is the div for the answers... duh. Unfortunately I'm back to not seeing any answers when I click the button now. It just does nothing on click. – Derrick Potter Jan 14 '16 at 05:08
@DerrickPotter For some reason `for..in` didn't work here.I have made the changes,it should work for you now. – phpcoderx Jan 14 '16 at 05:23
Amazing! Thank you so much for your help! I'll be taking code snippets from that and looking into them more to figure out exactly how that works, though I get the general idea. – Derrick Potter Jan 14 '16 at 05:31

score 1 · Answer 2 · answered Jan 14 '16 at 04:48

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

Make all your answer divs marked with some class say answer.
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
}
```
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()
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!

score 0 · Answer 3 · answered Jan 14 '16 at 04:50

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

How do I collapse the open FAQ when clicking on another?

3 Answers3