CODEWITHSUNDEEP
jquerytwitter-bootstrapaccordion
IntricatePixels
IntricatePixels

Reputation: 1229

bootstrap framework - have at least one accordion (aka collapse) item open at all times

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>

Upvotes: 7

Views: 7864

Answers (3)

Aelios
Aelios

Reputation: 12147

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

Upvotes: 2

IntricatePixels
IntricatePixels

Reputation: 1229

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 :)

Upvotes: 2

mars
mars

Reputation: 40

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?

Upvotes: 0

Related Questions