Geek asks and answers

Bootstrap framework - there is at least one chord (aka collapse) that is open at all times

I use Bootstrap on my site and just added the accordion as well as collapse to some content on the page.

It works great, but I would like to keep at least one panel open at all times .

Currently, panels always switch to open / close, see 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, which is 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>

+5
source share
3 answers

: Twitter--, ?

@aron.lakatos , . , :)

+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();
    }
});

e.preventDefault(); , # HTML,

+1

Bootstrap -, - .

bootstrap-collapse.js , .

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

0

More articles:


All Articles