title: Bootstrap sidenav tab content navigation not working properly
body: <p>I'm pretty new to web-development and currently trying to do a web-app but stuck at the page design. I'm trying to create a fixed side navbar with content to be displayed on side (in the second column of the splitted row). Below is the code that I've managed to come up with so far.</p>
  
  <p>Navigation works fine only the first time i.e. if I click all the buttons sequentially the first time I see the desired content body, but I can't click on the link second time and see the correct relevant content on the side. </p>
  
  <p>What am I doing wrong here? Help please!</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="col-2 bg-light py-0 px-1 sticky-top"&gt;
  
      &lt;ul class="nav flex-column"&gt;
        &lt;li class="nav-item text-left"&gt;
          &lt;a class="nav-link bg-dark list-group-item text-white active" href="#h_view" data-toggle="tab"&gt; Overview&lt;/a&gt;
          &lt;a class="nav-link bg-dark list-group-item text-white" href="#h_my" data-toggle="collapse"&gt;
            My History
          &lt;/a&gt;
          &lt;div id="h_my" class="collapse"&gt;
              &lt;a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_run"&gt; Runs&lt;/a&gt;
              &lt;a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_data"&gt;Data Update&lt;/a&gt;
              &lt;a class="nav-link list-group-item bg-secondary text-white" data-toggle="tab" href="#h_my_rules"&gt;Rules Mapping&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;div class="bg-white col-10"&gt;
    &lt;div class="tab-content pt-2"&gt;
  
      &lt;div id="h_view" class="container tab-pane active"&gt;
        This section is for History Overview
      &lt;/div&gt;
      &lt;div id="h_my_run" class="container tab-pane fade"&gt;
        This section is for Run History
      &lt;/div&gt;
      &lt;div id="h_my_data" class="container tab-pane fade"&gt;
        This section is for My Data Upload History
      &lt;/div&gt;
      &lt;div id="h_my_rules" class="container tab-pane fade"&gt;
        This section is for My Rules changes
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT: Problem seems to be with the collapse menu, checked in inspect element - after clicking on sub-items (Runs, Data Update, Rule Mapping), their class is changed to active permanently irrespective of where do I click next.</p>