title: Bootstrap js onclick classList.remove disappears the content
body: <p>I'm trying to add sub-menus for bootstrap's nav pills and collapse the &quot;sub-menus&quot; &amp; add &quot;<strong>active</strong>&quot; class to the clicked element, it's works fine but the Security tab's content is disappear when you click on the security tab...</p>
  <p>I don't want to disappear the content, just collapse the menu and remove the &quot;<strong>active</strong>&quot; class from all other tabs.</p>
  <p>The snippet is originally from <a href="https://kiranworkspace.com/downloads/profile-account-settings-page-ui-design-html-css-bootstrap/" rel="nofollow noreferrer">here</a></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>const sec_tab = document.getElementById('security-tab')
  
  sec_tab.addEventListener("click", () =&gt; {
      var elems = document.querySelectorAll(".active");
  
  [].forEach.call(elems, function(el) {
      el.classList.remove("active");
  });
      sec_tab.classList.add("active");
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
   
   &lt;section class="py-5 my-5"&gt;
          &lt;div class="container"&gt;
              &lt;div class="bg-white shadow content-tab rounded-lg d-block d-sm-flex"&gt;
                  &lt;div class="profile-tab-nav border-right"&gt;
                      &lt;div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"&gt;
                          &lt;a class="nav-link active" id="account-tab" data-toggle="pill" href="#account" role="tab" aria-controls="account" aria-selected="true"&gt;
                              &lt;i class="fa fa-home text-center mr-1"&gt;&lt;/i&gt; 
                              Account
                          &lt;/a&gt;
                          &lt;a class="nav-link" id="password-tab" data-toggle="pill" href="#password" role="tab" aria-controls="password" aria-selected="false"&gt;
                              &lt;i class="fa fa-key text-center mr-1"&gt;&lt;/i&gt; 
                              Password
                          &lt;/a&gt;
                          &lt;a class="nav-link" id="security-tab" data-toggle="collapse" data-target="#test"  href="#security" role="tab" aria-controls="security" aria-selected="false"&gt;
                              &lt;i class="fa fa-user text-center mr-1"&gt;&lt;/i&gt; 
                              Security
                          &lt;/a&gt;
                          &lt;div id="test" class="collapse"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Submenu 3&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;a class="nav-link" id="application-tab" data-toggle="pill" href="#application" role="tab" aria-controls="application" aria-selected="false"&gt;
                              &lt;i class="fa fa-tv text-center mr-1"&gt;&lt;/i&gt; 
                              Application
                          &lt;/a&gt;
                          &lt;a class="nav-link" id="notification-tab" data-toggle="pill" href="#notification" role="tab" aria-controls="notification" aria-selected="false"&gt;
                              &lt;i class="fa fa-bell text-center mr-1"&gt;&lt;/i&gt; 
                              Notification
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="tab-content p-4 p-md-5" id="v-pills-tabContent"&gt;
                      &lt;div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab"&gt;
                          &lt;h3 class="mb-4"&gt;Account Settings&lt;/h3&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;First Name&lt;/label&gt;
                                      &lt;input type="text" class="form-control" value="Kiran"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;Last Name&lt;/label&gt;
                                      &lt;input type="text" class="form-control" value="Acharya"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;Email&lt;/label&gt;
                                      &lt;input type="text" class="form-control" value="kiranacharya287@gmail.com"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;Phone number&lt;/label&gt;
                                      &lt;input type="text" class="form-control" value="+91 9876543215"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;Company&lt;/label&gt;
                                      &lt;input type="text" class="form-control" value="Kiran Workspace"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;Designation&lt;/label&gt;
                                      &lt;input type="text" class="form-control" value="UI Developer"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-12"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;Bio&lt;/label&gt;
                                      &lt;textarea class="form-control" rows="4"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero enim error similique quia numquam ullam corporis officia odio repellendus aperiam consequatur laudantium porro voluptatibus, itaque laboriosam veritatis voluptatum distinctio!&lt;/textarea&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;button class="btn btn-primary"&gt;Update&lt;/button&gt;
                              &lt;button class="btn btn-light"&gt;Cancel&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="password-tab"&gt;
                          &lt;h3 class="mb-4"&gt;Password Settings&lt;/h3&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;Old password&lt;/label&gt;
                                      &lt;input type="password" class="form-control"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;New password&lt;/label&gt;
                                      &lt;input type="password" class="form-control"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;Confirm new password&lt;/label&gt;
                                      &lt;input type="password" class="form-control"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;button class="btn btn-primary"&gt;Update&lt;/button&gt;
                              &lt;button class="btn btn-light"&gt;Cancel&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab"&gt;
                          &lt;h3 class="mb-4"&gt;Security Settings&lt;/h3&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;Login&lt;/label&gt;
                                      &lt;input type="text" class="form-control"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label&gt;Two-factor auth&lt;/label&gt;
                                      &lt;input type="text" class="form-control"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;div class="form-check"&gt;
                                          &lt;input class="form-check-input" type="checkbox" value="" id="recovery"&gt;
                                          &lt;label class="form-check-label" for="recovery"&gt;
                                          Recovery
                                          &lt;/label&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;button class="btn btn-primary"&gt;Update&lt;/button&gt;
                              &lt;button class="btn btn-light"&gt;Cancel&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="tab-pane fade" id="application" role="tabpanel" aria-labelledby="application-tab"&gt;
                          &lt;h3 class="mb-4"&gt;Application Settings&lt;/h3&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-md-6"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;div class="form-check"&gt;
                                          &lt;input class="form-check-input" type="checkbox" value="" id="app-check"&gt;
                                          &lt;label class="form-check-label" for="app-check"&gt;
                                          App check
                                          &lt;/label&gt;
                                      &lt;/div&gt;
                                      &lt;div class="form-check"&gt;
                                          &lt;input class="form-check-input" type="checkbox" value="" id="defaultCheck2" &gt;
                                          &lt;label class="form-check-label" for="defaultCheck2"&gt;
                                          Lorem ipsum dolor sit.
                                          &lt;/label&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;button class="btn btn-primary"&gt;Update&lt;/button&gt;
                              &lt;button class="btn btn-light"&gt;Cancel&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="tab-pane fade" id="notification" role="tabpanel" aria-labelledby="notification-tab"&gt;
                          &lt;h3 class="mb-4"&gt;Notification Settings&lt;/h3&gt;
                          &lt;div class="form-group"&gt;
                              &lt;div class="form-check"&gt;
                                  &lt;input class="form-check-input" type="checkbox" value="" id="notification1"&gt;
                                  &lt;label class="form-check-label" for="notification1"&gt;
                                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum accusantium accusamus, neque cupiditate quis
                                  &lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;div class="form-check"&gt;
                                  &lt;input class="form-check-input" type="checkbox" value="" id="notification2" &gt;
                                  &lt;label class="form-check-label" for="notification2"&gt;
                                      hic nesciunt repellat perferendis voluptatum totam porro eligendi.
                                  &lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;div class="form-check"&gt;
                                  &lt;input class="form-check-input" type="checkbox" value="" id="notification3" &gt;
                                  &lt;label class="form-check-label" for="notification3"&gt;
                                      commodi fugiat molestiae tempora corporis. Sed dignissimos suscipit
                                  &lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;button class="btn btn-primary"&gt;Update&lt;/button&gt;
                              &lt;button class="btn btn-light"&gt;Cancel&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
    
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>