Bootstrap List Group Nested Links 'freezes" and won't work after first click

Question

I am trying to create a page navigation feature in HTML using the Bootstrap List-group class.

However, the nested links 'Link 1' and 'Link 2' freeze after a user clicks them the first time.

How the feature is supposed to work:

When I click Home, show link 1 and when I further click Link 1, show Page 1.

Likewise, when I click Profile, show link 2, and when I further click Link 2, show Page 2.

The links link 1 and link 2 work fine on first click, but 'freeze' and won't work on second click.

Could you help me spot the issue!

Thanks!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">

      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home">
        <div class="list-group" id="link-tab">
          <a class="list-group-item" data-toggle="tab" href="#aa" role="tab" aria-controls="a">
            Link 1
          </a>
        </div>
      </div>

      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile">
        <div class="list-group" id="link-tab">
          <a class="list-group-item" data-toggle="tab" href="#bb" role="tab" aria-controls="b">
            Link 2
          </a>
        </div>
      </div>


      </div>
    </div>
  </div>
</div>
<br><br>

<div class="tab-content" id="nav-tabPage">
  <div class="tab-pane fade show active" id="aa" role="tabpanel" aria-labelledby="aa">
   Page 1
  </div>
  <div class="tab-pane fade" id="bb" role="tabpanel" aria-labelledby="bb">
   Page 2
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Answer 1

The problem is caused because tabs stay active once you click them for the first time.

The solution is to use JavaScript and do the following:

• Remove the HTML class active from the Link 1 tab every time the Home tab is clicked.
• Remove the HTML class active from the Link 2 tab every time the Profile tab is clicked.

See the snippet below.

const homeTab = document.querySelector("#list-home-list");
const profileTab = document.querySelector("#list-profile-list");

const link1 = document.querySelector("#link-1-tab .list-group-item");
const link2 = document.querySelector("#link-2-tab .list-group-item");

homeTab.addEventListener("click", () => {
  link1.classList.remove("active");
});

profileTab.addEventListener("click", () => {
  link2.classList.remove("active");
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home">
        <div class="list-group" id="link-1-tab">
          <a class="list-group-item" data-toggle="tab" href="#aa" role="tab" aria-controls="a">
            Link 1
          </a>
        </div>
      </div>

      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile">
        <div class="list-group" id="link-2-tab">
          <a class="list-group-item" data-toggle="tab" href="#bb" role="tab" aria-controls="b">
            Link 2
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<br><br>

<div class="tab-content" id="nav-tabPage">
  <div class="tab-pane fade show active" id="aa" role="tabpanel" aria-labelledby="aa">
    Page 1
  </div>
  <div class="tab-pane fade" id="bb" role="tabpanel" aria-labelledby="bb">
    Page 2
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>