Bootstrap JavaScript does not toggle tabs

Question

I read the Bootstrap Introduction, the Navs and tabs page, this answer and many other, still I cannot figure out what is my mistake.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="nav nav-tabs" role="tablist">
  <button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button>
  <button class="nav-link" data-bs-target="#tabUpgrades"><i class="bi-download" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"></i> Upgrades</button>
</div>


<div class="tab-content">
  <div id="tabSystems" class="tab-pane fade show active" role="tabpanel">
    aaaaa
  </div>
  <div id="tabUpgrades" class="tab-pane fade" role="tabpanel">
    bbbbb
  </div>
</div>

As you can see the tabs does not toggle. From what I learnt:

include JQuery before Bootstrap: done
set data-bs-toggle and data-bs-target: done
use classes like nav-link, tab-pane, etc... : done

What still am I missing?

R4ncid · Accepted Answer · 2022-04-29 07:06:00Z

2

It wasn't easy to spot but you have an error on your second button

you put data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades" into the <i> tag

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="nav nav-tabs" role="tablist">
  <button class="nav-link active" data-bs-target="#tabSystems" data-bs-toggle="tab" role="tab" type="button" aria-selected="true" aria-controls="tabSystems"><i class="bi-gear"></i> Systems</button>
  <button class="nav-link" data-bs-target="#tabUpgrades" data-bs-toggle="tab" role="tab" type="button" aria-selected="false" aria-controls="tabUpgrades"><i class="bi-download" ></i> Upgrades</button>
</div>


<div class="tab-content">
  <div id="tabSystems" class="tab-pane fade show active" role="tabpanel">
    aaaaa
  </div>
  <div id="tabUpgrades" class="tab-pane fade" role="tabpanel">
    bbbbb
  </div>
</div>

answered Apr 29, 2022 at 7:06

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Over a year ago

Is there any way to debug this kind of issues or we have just to rely on our eyes?

R4ncid Over a year ago

@Mark it's pretty hard to debug since it's plain html. You can try to search if someone implement some sort of XSD for validation but I'm not sure that it will solve this kind of issue

Collectives™ on Stack Overflow

Bootstrap JavaScript does not toggle tabs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related