Bootstrap Tabs using Next & Previous Buttons for Forms

Question

I am super stuck trying to split a form up in multiple tabs but having issues with the next and previous buttons on the second and third tab.

I want the tabs on top to change state as you would cycle through the tabs by clicking the buttons.

I have created a code pen and if anyone out there knows what I am doing wrong please let me know.

https://codepen.io/austin-simpkins/pen/yLyNLem

$('.btnNext').click(function() {
  $('.nav-pills > .active').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function() {
  $('.nav-pills > .active').prev('li').find('a').trigger('click');
});

Answer 1

The active class is being set on the a.nav-link node, so you need to look for the active state of that:

$('.btnNext').click(function(){
  $('.nav-item > a.nav-link.active').parent().next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function(){
  $('.nav-item > a.nav-link.active').parent().prev('li').find('a').trigger('click');
});

Answer 2

The active link is not the immediate child of nav-pills , so remove the child ( > ) selector:

$('.btnNext').click(function() {
    $('.nav-pills .active').parent().next('li').find('a').trigger('click');
})

$('.btnPrevious').click(function() {
    $('.nav-pills .active').parent().prev('li').find('a').trigger('click');
})

Demo

---

Bootstrap 4 Tabs with Previous & Next buttons