Bootstrap 5.2 Tabs - Navigate with external buttons

Question

I'm building a form that will exist across 4 tabs. I don't want the tabs on top to allow the user to navigation through the tabs, instead I'm looking to add a series of PREVIOUS/NEXT buttons IN each tab.

HTML:

<div class="setupForm" id="setupForm">
    <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" id="formTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <span class="nav-link active" id="step1-tab" role="tab" aria-controls="step1-tab-pane" aria-selected="true"><span>1</span></span>
        </li>
        <li class="nav-item" role="presentation">
            <span class="nav-link" id="step2-tab" role="tab" aria-controls="step2-tab-pane" aria-selected="false"><span>2</span></span>
        </li>
        <li class="nav-item" role="presentation">
            <span class="nav-link" id="step3-tab" role="tab" aria-controls="step3-tab-pane" aria-selected="false"><span>3</span></span>
        </li>
        <li class="nav-item" role="presentation">
            <span class="nav-link" id="step4-tab" role="tab" aria-controls="step4-tab-pane" aria-selected="false"><span>4</span></span>
        </li>
    </ul>
    <form action="#">
        <div class="tab-content" id="formTabsContent">
            <div class="tab-pane fade active show" id="step1-tab-pane" role="tabpanel" aria-labelledby="step1-tab" tabindex="0">
                <h3>Menu 1</h3>
                <label>Name</label><br/>
                <input name="first name" type="text" >
                <div class="mb-3 d-flex justify-content-end">
                    <a class="btn btn-yellow btn-tab" data-bs-toggle="tab" data-bs-target="#step3-tab-pane"><span>Next</span></a>
                </div>
            </div>
            <div class="tab-pane fade" id="step2-tab-pane" role="tabpanel" aria-labelledby="step2-tab" tabindex="0">
                <h3>Menu 2</h3>
                <label>name</label><br/>
                <input name="last name" type="text" >
                <div class="mb-3 d-flex justify-content-between">
                    <a class="btn btn-yellow btn-tab" data-bs-toggle="tab" data-bs-target="#step1-tab-pane"><span>Previous</span></a>
                    <a class="btn btn-yellow btn-tab" data-bs-toggle="tab" data-bs-target="#step3-tab-pane"><span>Next</span></a>
                </div>
            </div>
            <div class="tab-pane fade" id="step3-tab-pane" role="tabpanel" aria-labelledby="step3-tab" tabindex="0">
                <h3>Menu 3</h3>
                <label>password</label><br/>
                <input name="password" type="password" >
                <div class="mb-3 d-flex justify-content-between">
                    <a class="btn btn-yellow btn-tab" data-bs-toggle="tab" data-bs-target="#step2-tab-pane"><span>Previous</span></a>
                    <a class="btn btn-yellow btn-tab" data-bs-toggle="tab" data-bs-target="#step4-tab-pane"><span>Next</span></a>
                </div>
            </div>
            <div class="tab-pane fade" id="step4-tab-pane" role="tabpanel" aria-labelledby="step4-tab" tabindex="0">
                <h3>Menu 4</h3>
                <label>email</label><br/>
                <input name="email" type="email" ><br/>
                <input name="submit" type="submit" >
                <div class="mb-3 d-flex justify-content-between">
                    <a class="btn btn-yellow btn-tab" data-bs-toggle="tab" data-bs-target="#step3-tab-pane"><span>Previous</span></a>
                    <input class="btn btn-yellow" type="submit" value="Submit">
                </div>
            </div>
        </div>
    </form>
</div>

But when I try to write the jquery to makes these PREVIOUS/NEXT buttons functional, I keep getting a Uncaught TypeError: Illegal invocation when I click on the button.

JS:

$(document).ready(function(){
   $("#formTabsContent a.btn-tab").click(function(){
      var triggerTab = $(this).data('bs-target');
      $(triggerTab).tab('show');
   });
});

I'm trying to write this in jQuery so I make it easier for the other developers on my team, so is there a way to do what I am looking to accomplish in jQuery?

Answer 1

When I tried to run your code I got the error that: $(triggerTab).tab is not a function. In order to get this to work what would certainly work is what I have below in mostly vanilla JS. Not sure which libraries you're using but it seems to me that it is not finding the tab as you expect. The tab panel itself is easy to find with jQuery (or simply document.querySelector).

Hidden in the Bootstrap5 documentation is this section:

  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()

which demonstrates how to actually make a specific tab show up.

What they don't emphasize nearly enough is that:

constructor Activates a tab element and content container. Tab should have either a data-bs-target or, if using a link, an href attribute, targeting a container node in the DOM.

This was key basically if you don't set on each TAB (not the tab-pane, but the tab selector--even if you're not using it)

• the data-bs-target : must be set to a querySelector for the "pane" element aka the tab body/content.
• the data-bs-toggle : must be set to tab (or pill supposedly)

If you have those things set up. Then you still have to construct the bs.Tab(selectingTheTabSelector) note again that bootstrap doesn't care about the tab-panel (or tab content or tab body) they care about the tab that controls that tab panel. They select the tab-panel based on the tab's bs-target and they have to do all the logic--otherwise you get a bunch of junk error messages.

 $(document).ready(function() { $("#formTabsContent a.btn-tab").click(function() { const triggerTab = $(this).data('bs-target'); const tabInstance = new bootstrap.Tab(triggerTab) console.log({ triggerTab, tabInstance }) tabInstance.show() }); });

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="setupForm" id="setupForm"> <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" id="formTabs" role="tablist"> <li class="nav-item" role="presentation"> <span class="nav-link active" id="step1-tab" role="tab" data-bs-toggle="tab" data-bs-target='#step1-tab-pane' aria-controls="step1-tab-pane" aria-selected="true"><span>1</span></span> </li> <li class="nav-item" role="presentation"> <span class="nav-link" id="step2-tab" role="tab" data-bs-toggle="tab" data-bs-target='#step2-tab-pane' aria-controls="step2-tab-pane" aria-selected="false"><span>2</span></span> </li> <li class="nav-item" role="presentation"> <span class="nav-link" id="step3-tab" role="tab" data-bs-toggle="tab" data-bs-target='#step3-tab-pane' aria-controls="step3-tab-pane" aria-selected="false"><span>3</span> </span> </li> <li class="nav-item" role="presentation"> <span class="nav-link" id="step4-tab" role="tab" data-bs-target='#step4-tab-pane' data-bs-toggle="tab" aria-controls="step4-tab-pane" aria-selected="false" ><span>4</span></span> </li> </ul> <form action="#"> <div class="tab-content" id="formTabsContent"> <div class="tab-pane fade active show" id="step1-tab-pane" role="tabpanel" aria-labelledby="step1-tab" tabindex="0"> <h3>Menu 1</h3> <label>Name</label><br/> <input name="first name" type="text"> <div class="mb-3 d-flex justify-content-end"> <a class="btn btn-yellow btn-tab" data-bs-toggle="tab" data-bs-target="#step2-tab"><span>Next</span></a> </div> </div> <div class="tab-pane fade" id="step2-tab-pane" role="tabpanel" aria-labelledby="step2-tab" tabindex="0"> <h3>Menu 2</h3> <label>name</label><br/> <input name="last name" type="text"> <div class="mb-3 d-flex justify-content-between"> <a class="btn btn-yellow btn-tab" data-bs-toggle="tab" data-bs-target="#step1-tab"><span>Previous</span></a> <a class="btn btn-yellow btn-tab" data-bs-toggle="tab" data-bs-target="#step3-tab"><span>Next</span></a> </div> </div> <div class="tab-pane fade" id="step3-tab-pane" role="tabpanel" aria-labelledby="step3-tab" tabindex="0"> <h3>Menu 3</h3> <label>password</label><br/> <input name="password" type="password"> <div class="mb-3 d-flex justify-content-between"> <a class="btn btn-yellow btn-tab" data-bs-toggle="tab" data-bs-target="#step2-tab"><span>Previous</span></a> <a class="btn btn-yellow btn-tab" data-bs-toggle="tab" data-bs-target="#step4-tab"><span>Next</span></a> </div> </div> <div class="tab-pane fade" id="step4-tab-pane" role="tabpanel" aria-labelledby="step4-tab" tabindex="0"> <h3>Menu 4</h3> <label>email</label><br/> <input name="email" type="email"><br/> <input name="submit" type="submit"> <div class="mb-3 d-flex justify-content-between"> <a class="btn btn-yellow btn-tab" data-bs-toggle="tab" data-bs-target="#step3-tab"><span>Previous</span></a> <input class="btn btn-yellow" type="submit" value="Submit"> </div> </div> </div> </form> </div>