Bootstrap 5 Tabs with Next/Prev Button without jQuery

Question

I'm trying to add Prev and Next buttons to bootstrap 5 tabs without using jQuery.

I have see this post with a perfect response, that I report below, but I'm not able to do the same thing in Javascript without jQuery.

Can anyone help me?

$('.btnNext').click(function() {
  const nextTabLinkEl = $('.nav-tabs .active').closest('li').next('li').find('a')[0];
  const nextTab = new bootstrap.Tab(nextTabLinkEl);
  nextTab.show();
});

$('.btnPrevious').click(function() {
  const prevTabLinkEl = $('.nav-tabs .active').closest('li').prev('li').find('a')[0];
  const prevTab = new bootstrap.Tab(prevTabLinkEl);
  prevTab.show();
});





  
    Home
  
  
    Menu 1
  
  
    Menu 2
  




  
    Home
    Next

  
  
    Menu 1
    Back
    Next
  
  
    Menu 2
    Back

user_5056494 · Answer

You're still calling jQuery methods. You need to translate that logic into JavaScript if you want to avoid using jQuery. Your syntax and logic may end up looking different.

Refer to https://www.w3schools.com/howto/howto_js_tabs.asp as a starting point.

Remember to remove your jQuery script tag at the bottom of your HTML file.

user_17640421 · Answer

Below is an example using only Javascript, there are several ways to do this, this is one of them, I hope it helps.

const nextBtn = document.querySelectorAll(".btnNext");
const prevBtn = document.querySelectorAll(".btnPrev");

nextBtn.forEach(function(item, index){
    item.addEventListener('click', function(){
      let id = index + 1;
      let tabElement = document.querySelectorAll("#myTab li a")[id];
      var lastTab = new bootstrap.Tab(tabElement);
      lastTab.show();   
    });
});

prevBtn.forEach(function(item, index){
    item.addEventListener('click', function(){
      let id = index;
      let tabElement = document.querySelectorAll("#myTab li a")[id];
      var lastTab = new bootstrap.Tab(tabElement);
      lastTab.show();
    });
});

      



  
    Menu-1
  
  
    Menu-2
  
  
    Menu-3
  




  
    Menu-1
    TEXT A:......
    
    
    Next
  
  
    Menu-2
    TEXT B:....
    
    Back
    Next
  
  
    Menu-3
    TEXT C:....
    
    Back

Bootstrap 5 Tabs with Next/Prev Button without jQuery

2 Answers