Bootstrap Tabs: Next & Previous Buttons for Forms

Question

I am trying to (eventually) split a form over several Bootstrap 3.x tabs, but I am having trouble with the previous and next buttons. Only the first next button functions an

Answer 1

Anyone who want to perform next previous operations on tab, follow following steps:

a) Put next prev buttons in each tab-panel

b) Bind the buttons clicks to body so that it will be called on click

c) On click trigger click of next/prev tab

d) If it is last tab redirect user to appropriate tab (Call show events of first or last tab)

/**** JQuery *******/
jQuery('body').on('click','.next-tab', function(){
      var next = jQuery('.nav-tabs > .active').next('li');
      if(next.length){
        next.find('a').trigger('click');
      }else{
        jQuery('#myTabs a:first').tab('show');
      }
});

jQuery('body').on('click','.previous-tab', function(){
      var prev = jQuery('.nav-tabs > .active').prev('li')
      if(prev.length){
        prev.find('a').trigger('click');
      }else{
        jQuery('#myTabs a:last').tab('show');
      }
});

/******* CSS *********/
.previous-tab,
.next-tab{
	display: inline-block;
	border: 1px solid #444348;
	border-radius: 3px;
	margin: 5px;
	color: #444348;
	font-size: 14px;
	padding: 10px 15px;
	cursor: pointer;
}

    
Step1
    
Step2


	

    
tab1 content
		
//Include next prev buttons in the tab-content
		previous
		next
    
    

		
tab2 content
    
//Include next prev buttons in the tab-content
		previous
		next