title: Tabs show as per button not working using bootstrap 5?
body: <p>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.</p>
  <p>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.</p>
  <p><strong>Giving this error in console:-</strong>
  Uncaught TypeError: Cannot read property 'show' of null</p>
  <p>My Code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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()
      })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;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"&gt;&lt;/script&gt;
  
  
  &lt;!-- Button trigger modal --&gt;
      &lt;button type="button" class="btn btn-primary register-btn"&gt;
          Register
      &lt;/button&gt;
      &lt;button type="button" class="btn btn-primary login-btn"&gt;
          Login
      &lt;/button&gt;
  
  &lt;!-- Modal --&gt;
   &lt;div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div&gt;
                  &lt;button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"&gt;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body p-0"&gt;
                  &lt;div class="row m-0"&gt;
                      &lt;div class="col-md-6 p-0"&gt;
                          &lt;img src="images/login-img.png" class="img-fluid" alt=""&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;div class="login-right-body"&gt;
                              &lt;ul class="nav nav-pills nav-fill" id="myTab" role="tablist"&gt;
                                  &lt;li class="nav-item" role="presentation"&gt;
                                      &lt;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"&gt;Login&lt;/button&gt;
                                  &lt;/li&gt;
                                  &lt;li class="nav-item" role="presentation"&gt;
                                      &lt;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"&gt;Register&lt;/button&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;div class="tab-content" id="myTabContent"&gt;
                                  &lt;div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab"&gt;
                                      &lt;form&gt;
                                          &lt;div class="form-group custom-form-group"&gt;
                                              &lt;label&gt;Mobile Number&lt;/label&gt;
                                              &lt;input type="text" class="form-control"&gt;
                                          &lt;/div&gt;
                                        
                                          &lt;div class="form-group custom-form-group"&gt;
                                              &lt;button class="btn btn-primary btn-block"&gt;Login&lt;/button&gt;
                                          &lt;/div&gt;
                                      &lt;/form&gt;
                                  &lt;/div&gt;
                                  &lt;div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab"&gt;
                                      &lt;form&gt;
                                          &lt;div class="form-group custom-form-group"&gt;
                                              &lt;label&gt;Full Name&lt;/label&gt;
                                              &lt;input type="text" class="form-control"&gt;
                                          &lt;/div&gt;
                                         
                                          &lt;div class="form-group custom-form-group"&gt;
                                              &lt;button class="btn btn-primary btn-block"&gt;Register&lt;/button&gt;
                                          &lt;/div&gt;
                                      &lt;/form&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
           
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks for your efforts!</p>