Bootstrap Nested List Group shows both items in the Tab Content

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

How the feature should work:

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

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

The links work fine and show the right items.

The problem is, both Link 1 and Link 2 show up at the same time when I click either the Home link or the Profile link.

Thanks!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/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="list-group" id="list-tab" role="tablist">
        <a id="list-home-page" data-toggle="tab" href="#aa" role="tab" aria-controls="a">
        Link 1
        </a>
        <a id="list-profile-page" data-toggle="tab" href="#bb" role="tab" aria-controls="b">
        Link 2
        </a>
      </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" 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/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<!-- end snippet -->

Looking at your code it seems you've maybe conflated two concepts together in trying to create this navigation.

Usually list-group and list-group-item are used within unordered list elements like this

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
</ul>

While you can still used the same HTML elements (ul and li) if you want, you have to change the classes in bootstrap when you want to use it for navigation.

This isn't just the styling affect but also some of the JS that's used is going to be different.

Example:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

I recommend checking the documentation starting in this section (link below) and refactor your code to match.

Bootstrap 4 Tab - JavaScript Behavior

Now, tabs I would usually suggest if you want users to stay on one page but show different layers of content on that single page. If you are looking for navigation between pages like

• example.com/home
• ../about
• ../contact

Consider using the navbar instead.

Bootstrap 4 - Navbar

One thing I would warn against is copying the code from the documentation and simply plugging in the values you want. It may work but it won't teach you anything.