Bootstrap 4 data-toggle="tab" not changing content

Question

I'm trying to use the data-toggle="tab" function in a navbar in Bootstrap 4 and I can't figure out why my tabs aren't changing. I made a codepen with the stripped down code: https://codepen.io/xanabobana/pen/pobRxpx

<nav class="navbar navbar-expand-md p-0" role="navigation" id='header-nav'>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>

         <div class="collapse navbar-collapse">
                    <ul class="navbar-nav" id="myTab" role="tablist">
                        <li class="nav-item"><a class="nav-link main-nav active" id="home-nav" data-toggle="tab" href="#home-content" aria-controls="home-content" aria-selected="true">Home</a></li>
                        <li class="nav-item"><a class="nav-link main-nav" id="find-data-nav"  data-toggle="tab" href="#find-data-content" aria-controls="find-data-content" aria-selected="false">View Inventory</a></li>
                        <li class="nav-item"><a class="nav-link main-nav" id="suggest-data-nav" data-toggle="tab" href="#suggest-data-content" aria-controls="suggest-data-content" aria-selected="false">Suggest a Data Rescue</a></li>
                        <li class="nav-item"><a class="nav-link main-nav" id="about-nav" data-toggle="tab" href="#about-content" aria-controls="about-content" aria-selected="false">About</a></li>
                    </ul>
           </div>
</nav>

<div id="home-content" class="tab-pane fade show active" aria-labelledby="home-nav">
     Home Content
</div>

 <div id="find-data-content" class="tab-pane fade" aria-labelledby="find-data-nav">
   find data content
</div>

<div id="suggest-data-content" class="tab-pane fade" role="tabpanel" aria-labelledby="suggest-data-nav">
            suggest data content
</div>

 <div id="about-content" class="tab-pane fade" role="tabpanel" aria-labelledby="about-nav">
   About
</div>

Anzor Asadov · Accepted Answer · 2020-10-29 13:27:54Z

1

You didn't include jQuery before bootstrap in your pen. Once you do that it starts working:

answered Oct 29, 2020 at 13:27

Anzor Asadov

4023 silver badges13 bronze badges

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

2 Comments

xanabobana Over a year ago

strange, in my development environment JQuery is before Bootstrap but it doesn't work there dev.vmc.w3.uvm.edu/xana/data_rescue#home-content

Anzor Asadov Over a year ago

your ul containing the tabs needs the class nav added: <ul class="navbar-nav nav" id="myTab" role="tablist">

Collectives™ on Stack Overflow

Bootstrap 4 data-toggle="tab" not changing content

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related