Change the active bootstrap tab on button click

Question

I want to change the active bootstrap tab on the click of another button.

I have tried add id's to the tabs li and write custom jquery code.

$('#emailNotify').click(function () {
    $('#notify').addClass('active').attr('aria-expanded','true');
    $('#myacc').removeClass('active').attr('aria-expanded','false');
});

This code works fine on first click but it doesn't change back when I tried to click My Account tab again.

Markup:

<ul class="content-list museo_sans500">
<li><a href="javascript:void(0)">Change Password</a></li>
<li><a id="emailNotify" data-toggle="tab">Change Email Notifications</a></li>
<li><a href="javascript:void(0)">Change Profile Picture</a></li>
</ul>

' $( "#tabs" ).tabs({ active: 0 });' This the way I do it in jquery. this would be first tab — Fintan Creaven
@NuttyProgrammer are you using data-toggle="tab" for your tabs — bigOther

Carlos Mayo Carlos Mayo · Accepted Answer · 2015-09-01T19:58:37

You can change the active tab on the click event button with that:

$('#changetabbutton').click(function(e){
    e.preventDefault();
    $('#mytabs a[href="#second"]').tab('show');
})

Here's a JSFiddle with an example:

http://jsfiddle.net/4ns0mdcf/

Change the active bootstrap tab on button click

2 Answers