Select Page
This entry has been published on 2016-09-27 and may be out of date.

Last Updated on 2016-09-27.

[:en]There are many projects on Github which implement wizard-like Next and Previous buttons for Bootstrap tabbed menus. Unfortunately, they seem not to consider there can be dropdown menus inside the tabs, which leads to errors.

So here is some code to show one way how to implement the Next button.

Assuming you have some tabs like those:

<ul class="nav nav-tabs">
	<li role="navigation" class="active dropdown">
	<a class="dropdown-toggle" data-toggle="dropdown" href="#">
	    Main 1
	    <span class="caret"></span>
	</a>
	<ul class="dropdown-menu">
	    <li class="active"><a data-toggle="tab" href="#tab1">Sub 1</a></li>
	    <li><a data-toggle="tab" href="#tab2">Sub 2</a></li>
	    <li><a data-toggle="tab" href="#tab3">Sub 3</a></li>
	</ul>
	</li>
	...

<div class="text-right">
  <button id="next-tab" class="btn btn-default right">
  <span class="glyphicon glyphicon-chevron-right"></span>
    Next                
  </button>
</div>

Use this JS / JQuery code:

$('#next-tab').click(function (e) {
    
    var activetab = $('.nav-tabs > .active');   
    children = activetab.find('li');
    var activeHref;

    if (children.length > 0) { //dropdown menu
        var activeSubtab = activetab.find('.active');
        activeHref = activeSubtab.find('a')[0].hash;
    }
    else { //common tab
        activeHref = activetab.find('a')[0].hash;
    }

    var tabIndex = activeHref.replace("#tab", "");

    tabIndex++;
    var nextTabname = "tab" + tabIndex;

    var activeHref = $('a[href$="' + nextTabname + '"]').trigger('click');
  
    e.preventDefault();
});

 [:]