7

I'm using Bootstrap on my site and just added an accordion aka collapse to some page content.

It works fine but I'd like to keep at least one panel open at all times.

Currently, the panels always toggle open/close, see the example below:

http://twitter.github.com/bootstrap/javascript.html#collapse

Has anyone found a workaround for this?

Here is the code from the Boostrap site that's similar to my current implementation (initializing it using data attributes):

<div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div>

Improve this question
3
  • 1
    I have the same concern. Please post if you find a solution. Thanks! Commented Mar 10, 2013 at 23:23
  • Also having the same issue. like @MattJohnson I have tried the solution of trying to prevent the default hide event but had no luck. Commented Apr 3, 2013 at 18:02
  • 1
    possible duplicate, solution here: stackoverflow.com/questions/15725717/… Commented Apr 16, 2013 at 12:54

3 Answers 3

Reset to default
2

Solution to this question here: How do you make Twitter Bootstrap Accordion keep one group open?

Thanks @aron.lakatos for pointing out the other solved question. While questions are same, the solved one was asked a few weeks after this question here :)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

http://jsfiddle.net/SMT9D/61/

$('.accordion-toggle').on('click',function(e){ if($(this).parents('.accordion-group').children('.accordion-body').hasClass('in')){ e.preventDefault(); e.stopPropagation(); } });

You should add e.preventDefault(); to prevent the default behaviour of # HTML anchor if you have a scroll in your page

Improve this answer

Comments

0

You have to prevent Bootstrap from doing anything when somebody clicks on the active group.

Search in bootstrap-collapse.js for the function which handles this.

Have you had look at http://twitter.github.com/bootstrap/javascript.html#collapse > Usage > Options?

Improve this answer

2 Comments

The only thing it describes that seems promising is the hide event. One would think you could just handle the event and return false, but that doesn't work consistently.
jus add class="accordion-body collapse in" instead of class="accordion-body collapse". on adding "in" the group will remain open.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.