Bootstrap navigation tabs with dropdown menus: How to implement Next button

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>

Main 1

</a>

</ul>

</li>

...

</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();
});

$('#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();

});

Bootstrap navigation tabs with dropdown menus: How to implement Next button

Submit a Comment Cancel reply

Updated

Comments

Posts

Categories

Archives