Tabs show as per button not working using bootstrap 5?

Question

I'm using bootstrap 5 i have one modal for login and register but but there is two bootstrap tabs inside one modal and i want to display tab as per button click but this is not working.

When i click on login button then inside modal login tab should be active and if i click on register button then inside modal register tab should be active.

Giving this error in console:- Uncaught TypeError: Cannot read property 'show' of null

My Code:

 $('.register-btn').click(function() {
        $('#loginModal').modal('show');
        var triggerEl = document.querySelector('[data-bs-target="#register"]')
        bootstrap.Tab.getInstance(triggerEl).show()
    })
    $('.login-btn').click(function() {
        $('#loginModal').modal('show');
        var triggerE2 = document.querySelector('[data-bs-target="#login"]')
        bootstrap.Tab.getInstance(triggerE2).show()
    })

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>


<!-- Button trigger modal -->
    <button type="button" class="btn btn-primary register-btn">
        Register
    </button>
    <button type="button" class="btn btn-primary login-btn">
        Login
    </button>

<!-- Modal -->
 <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <div class="row m-0">
                    <div class="col-md-6 p-0">
                        <img src="images/login-img.png" class="img-fluid" alt="">
                    </div>
                    <div class="col-md-6">
                        <div class="login-right-body">
                            <ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
                                    <form>
                                        <div class="form-group custom-form-group">
                                            <label>Mobile Number</label>
                                            <input type="text" class="form-control">
                                        </div>
                                      
                                        <div class="form-group custom-form-group">
                                            <button class="btn btn-primary btn-block">Login</button>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
                                    <form>
                                        <div class="form-group custom-form-group">
                                            <label>Full Name</label>
                                            <input type="text" class="form-control">
                                        </div>
                                       
                                        <div class="form-group custom-form-group">
                                            <button class="btn btn-primary btn-block">Register</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         
        </div>
    </div>
</div>

Thanks for your efforts!

Answer 1

Gives me an error : bootstrap.Tab.getInstance(...) is null –

It's necessary use getOrCreateInstance instead of getInstance

https://getbootstrap.com/docs/5.2/components/navs-tabs/#methods

Answer 2

You need to 1) Enable tabbable tabs via JavaScript, and then 2) Activate individual tabs (the triggers you're trying to refer to don't exist).

https://getbootstrap.com/docs/5.0/components/navs-tabs/

Check: Via JavaScript

// Via JavaScript

// Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

// You can activate individual tabs in several ways:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Answer 3

You can trigger the click to simulate clicking the tab.

$(".register-btn").click(function () {
  $("#register-tab").trigger("click");
  $("#loginModal").modal("show");
});
$(".login-btn").click(function () {
  $("#login-tab").trigger("click");
  $("#loginModal").modal("show");
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>


<!-- Button trigger modal -->
    <button type="button" class="btn btn-primary register-btn">
        Register
    </button>
    <button type="button" class="btn btn-primary login-btn">
        Login
    </button>

<!-- Modal -->
 <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <div class="row m-0">
                    <div class="col-md-6 p-0">
                        <img src="images/login-img.png" class="img-fluid" alt="">
                    </div>
                    <div class="col-md-6">
                        <div class="login-right-body">
                            <ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
                                    <form>
                                        <div class="form-group custom-form-group">
                                            <label>Mobile Number</label>
                                            <input type="text" class="form-control">
                                        </div>
                                      
                                        <div class="form-group custom-form-group">
                                            <button class="btn btn-primary btn-block">Login</button>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
                                    <form>
                                        <div class="form-group custom-form-group">
                                            <label>Full Name</label>
                                            <input type="text" class="form-control">
                                        </div>
                                       
                                        <div class="form-group custom-form-group">
                                            <button class="btn btn-primary btn-block">Register</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         
        </div>
    </div>
</div>