How to create a "next" button that switches tabs using Java Script and Twitter Bootstrap

Question

I have the following code: http://jsfiddle.net/h6rQ2/2/

I'm using html to create a basic form. This form has two sections -- each section is contained within a tab (tabs created with Twitter Bootstrap).

How do I create a "next" button which switches from the first tab to the second tab? When I try doing it right now, it only submits the form. Does Twitter Bootstrap already provide a function that lets you switch tabs via an external button? If so, how do you use it?

Answer 1

Given those buttons :

<div class="btn-group">
    <button class="btn" id="prevtab" type="button">Prev</button>
    <button class="btn" id="nexttab" type="button">Next</button>
</div>

You'd need this JS :

var $tabs = $('.tabbable li');

$('#prevtab').on('click', function() {
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
});

$('#nexttab').on('click', function() {
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
});

Working demo (jsfiddle)