CODEWITHSUNDEEP
jqueryhtmlbootstrap-4
Lewis
Lewis

Reputation: 2178

Bootstrap 4 Tabs with Previous & Next buttons

I'm attempting to create some previous and next buttons within a bootstrap 4 tab snippet, but I'm having trouble with the Jquery. More specifically structuring my trigger event or' the path to my trigger event.

I can't seem to figure out the route properly. I'm fairly inexperienced with Jquery so be gentle. ;P

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

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

You can find a full snippet of what I'm in the process of building here (JSFiddle);

Many thanks in advance.

-B.

Upvotes: 2

Views: 9543

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362340

You need to get the parent of the active tab and then .next() or .prev(). So, the correct jQuery selectors would be...

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

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

https://www.codeply.com/go/d7X3s15VCS

Upvotes: 4

Related Questions