CODEWITHSUNDEEP
jquerycsstwitter-bootstrapbootstrap-tabs
blackninja65
blackninja65

Reputation: 21

Collapse Bootstrap tabs - can't toggle .active tab class

I use (styled) Bootstrap tabs

I want to close Bootstrap tabs when clicking on it again.

It works partially, I can close the corresponding panel but when I want to toggle the 'active' class of the tab, script don't work.

My JS code :

$('[data-toggle=tab]').click(function(e){
    if($(this).parent().hasClass('active')){
        e.preventDefault();

        // toggle 'active' tab class (styling)
        $(this).parent().toggleClass('active');

        // toggle 'active' panel class (hide it)
        $($(this).attr("href")).toggleClass('active');
    }
})

All code (html, css, js) is visible here : https://jsfiddle.net/j9stkqf6/1/

If you comment :

$(this).parent().toggleClass('active');

the panel is hidden

I also tried step/step debug mode All works fine until end of JS function, all reappear (tab.active class and panel)

Can you help me close panel AND toggle tab 'active' class when clicking again on tab.

Thanks !

Upvotes: 0

Views: 3855

Answers (2)

blackninja65
blackninja65

Reputation: 21

Finally I got it working :

I had to add 'e.stopPropagation()' to my Javascript in addition to 'e.preventDefault()'

'e.preventDefault()' stop the action from Bootstrap on that event (click on A link)

'e.stopPropagation()' avoid other actions from Bootstrap (catch click on LI)

cf. e.preventDefault() vs e.stopPropagation()

$('[data-toggle=tab]').click(function(e){
    if($(this).parent().hasClass('active')){

    e.preventDefault();
    e.stopPropagation();

        $(this).parent().removeClass('active');

        $($(this).attr("href")).removeClass('active');
        $($(this).attr("href")).removeClass('in');

        $(this).attr("aria-expanded", false);
    }
})

You can see my working example here : https://jsfiddle.net/j9stkqf6/10/

Upvotes: 2

Anil Panwar
Anil Panwar

Reputation: 2622

Here is the attached Demo that will help you

Method 1

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-info">
        <div class="panel-heading " role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#per" aria-expanded="true" aria-controls="collapseOne">
                    <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 1</strong>
                </a>
            </h4>
        </div>
        <!--To make by defualt open a any panel put class "in" (without quotes)-->
        <div id="per" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                Link 1    Link 1    Link 1    Link 1    Link 1    Link 1
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#family" aria-expanded="false" aria-controls="collapseTwo">
                    <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 2</strong>
                </a>
            </h4>
        </div>
        <div id="family" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                Link 2  Link 2  Link 2  Link 2  Link 2  Link 2
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#social" aria-expanded="false" aria-controls="collapseThree">
                    <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 3</strong>
                </a>
            </h4>
        </div>
        <div id="social" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                Link 3  Link 3  Link 3  Link 3 Link 3   Link 3  Link 3
            </div>
        </div>
    </div>
</div>

Method 2

To collapse all together you can also use something like, you can collapse all the navs which has class "in" , because opened collapsible have class "in" added. You catch them using like below script close those.

 $('#accordion .collapse').on('show.bs.collapse', function (e) {
        $('#accordion .in').collapse('hide');
    });

Upvotes: 0

Related Questions