CODEWITHSUNDEEP
twitter-bootstraptabs
Fran_gg7
Fran_gg7

Reputation: 737

Bootstrap Collapse broken after expand all tabs

The behavior in my Boostrap Collapse control is to have only one tab open. So when I try to expand one tab, the tab that was open is closed and the new one is open. Everything works fine.

However, there is an scenario where I need to expand all the tabs so I use this code to expand all the tabs:

$('#openAllBtn').click(function (e) {
    e.preventDefault();

    $('#accordion .collapse').collapse('show');
});

And this code to close all the tabs:

$('#closeAllBtn').click(function (e) {
    e.preventDefault();

    $('#accordion .collapse').collapse('hide');
});

The problem is that, after all the tabs are minified with that code, the initial behaviour of the control is broken and now the opened tab is not closed when I expand another one, being possible to have multiple tabs expanded.

What am I doing wrong? I want to restart the initial behaviour.

My HTML:

<ul class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <li class="panel panel-default">
        <div class="panel-heading" role="tab" id="collapse-heading-1">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-category-1" aria-expanded="false" aria-controls="collapse-category-1">
                My title 1
            </a>
        </div>
        <div class="panel-collapse collapse" id="collapse-category-1" role="tabpanel" aria-labelledby="collapse-heading-1">
            <div class="panel-body">
                My body 1
            </div>
        </div>
    </li>
    <li class="panel panel-default">
        <div class="panel-heading" role="tab" id="collapse-heading-2">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-category-2" aria-expanded="false" aria-controls="collapse-category-2">
                My title 2
            </a>
        </div>
        <div class="panel-collapse collapse" id="collapse-category-2" role="tabpanel" aria-labelledby="collapse-heading-2">
            <div class="panel-body">
                My body 2
            </div>
        </div>
    </li>
    <li class="panel panel-default">
        <div class="panel-heading" role="tab" id="collapse-heading-3">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-category-3" aria-expanded="false" aria-controls="collapse-category-3">
                My title 3
            </a>
        </div>
        <div class="panel-collapse collapse" id="collapse-category-3" role="tabpanel" aria-labelledby="collapse-heading-3">
            <div class="panel-body">
                My body 3
            </div>
        </div>
    </li>
</ul>

Upvotes: 2

Views: 1454

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362450

I think you want to do this..

$('.open-all').click(function(){
  $('.panel-collapse').removeData('bs.collapse')
  .collapse({parent:false, toggle:false})
  .collapse('show')
  .removeData('bs.collapse')
  .collapse({parent:'#accordion', toggle:false});
});

http://www.codeply.com/go/03TTywsINc

Upvotes: 2

Related Questions