I've got a problem with the bootstrap accordion.(http://twitter.github.io/bootstrap/javascript.html#collapse)

First, a jsfiddle showing the problem: http://jsfiddle.net/v6qPJ/7/

The collapsible group item works fine. Next, I've got a code which hide and show collapsible group item. It works too, but there is an issue if the user does this steps (all the code examples are from the jsfiddle, i've reduce the code to his minimum, so don't search any logic):

1) The active group item is hidden.


2) A second group item (visible) is opened by the user.

3) The previously hidden group item is shown


4) The user can't open the first group item...

If the first group item is collapsed when we hide it, there is no problem. So I think that the problem come from how bootstrap manage the group for showing just one.

I found this similar issue: https://github.com/twitter/bootstrap/issues/6081 but the solution works for just a collapsible div, not the entire accordion...

I use the 2.3 version of Bootstrap.


  • why do you have a hide and show button when a user can just click on the link of the accordion header, first, second and third for example – Richlewis Apr 29 '13 at 13:12
  • Cause it's not the same: the user can show or hide the body, but the entire group is hidden by the code when another event is done. – Getz Apr 29 '13 at 13:14
  • same as what? what are you gaining by having a hide and show button? – Richlewis Apr 29 '13 at 13:15
  • Excuse-me, i didn't finished my comment, it's fixed ;) The hide and show button on fiddle are just here for the example. In the real code, it's a search input which filter the group item and hide the group where none result in the body is found – Getz Apr 29 '13 at 13:15
  • if its fixed best to put an answer so it may help other people – Richlewis Apr 29 '13 at 13:19

You need to use the bootstrap methods for the accordion to hide and show them.

The Bootstrap documentation says:


Shows a collapsible element.


Hides a collapsible element

See fiddle here : http://jsfiddle.net/GUZgY/

  • Thanks for your answer. I've ever think about this solution, but not with this selector (with ".collapse" instead). Your solution almost works on the fiddle, but not really in my real code. In your fiddle, you use the accordion-group as collapsible element, but it's not and don't have to be a collapsible element. This element must be hidden, but not collapsed. I've added border in the fiddle,so maybe you can see what i mean. Its a little bit difficult to explain: jsfiddle.net/GUZgY/1 – Getz Apr 29 '13 at 15:21
  • I don't really understand what you are trying to do, could you maybe show me an example closer to your real code? In my example you can hide the accordion and if you show it again it will still be open unless you opened another one, is that not the behavior you wanted? – Samuel Robert Apr 29 '13 at 20:16

Your Answer

