"Troubleshooting Bootstrap nav-pills' failure to update displayed content

I'm currently working on creating a dynamic navbar that updates the content based on which navigation pill is selected. For some reason, the content in my div.tab-content isn't changing as expected...

Here is an example of the code I am using:

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeedeabb0acb0ad">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
  <div class="container" id="navigation" role="navigation">
      <!-- pills content -->
      <ul  class="nav nav-pills mb-3" id="detail_tab" role="tablist">
          <li class="nav-item" role="presentation">
              <a
                  class="nav-link active"
                  id="pill1" 
                  data-mdb-toggle="pill"
                  href="#content1"
                  role="tab"
                  aria-controls="content1"
                  aria-selected="true"                        
              >pill1</a>
          </li>
          <li class="nav-item" role="presentation">
              <a
                  class="nav-link"
                  id="pill2" 
                  data-mdb-toggle="pill"
                  href="#content2"
                  role="tab"
                  aria-controls="content2"
                  aria-selected="false"                        
              >pill2</a>
          </li>
      </ul>
      <!-- pills nav -->


      <!-- pills content -->
      <div class="tab-content clearfix" id="tablist-content">
          <div
              class="tab-pane fade show active"
              id="content1"
              role="tabpanel"
              aria-labelledby="pill1"
          >
              content1
          </div>
          <div class="tab-pane fade" id="content2" role="tabpanel" aria-labelledby="pill2">
              content2
          </div>
      </div>
      <!-- pills content -->
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03606c716643312d32322d35">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284a47475c5b5c5a4958681d061a061b">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>

Any idea why it's not functioning correctly? Am I missing something?

javascripthtmlcsstwitter-bootstrapbootstrap-5

Answer №1

Replace data-mdb-toogle with data-bs-toogle.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Effective way to manage Angular scope without resorting to $parent.$parent

After doing some research, I have not been able to find a solution that addresses my particular issue. Here is what I know: ng-if and ng-repeat create isolated scopes. Avoid using $parent.someProperty. Using $parent.$parent.someProperty is strongly disc ...

javascriptangularjs

What is the best way to ensure that the text within Span children is properly laid out to match the width of the parent div tag?

This particular instance involves setting the width of the div tag to 200px and organizing all the span children to occupy the entire width of the parent div tag. If the first row is filled, the span tags should then flow into a second row. My attempt at ...

htmlcss

Retrieving JSON data and transforming it into HTML

After reading several examples, I am still struggling with a particular issue. I am receiving a feed from an API that is structured like this: { total:123, id: "1234", results: [ { id: "1234", name: "bobs market", ...

javascriptjqueryhtmlgetjsonhandlebars.js

Include an icon in the header of a jumbotron

Here is the jumbotron configuration I am working with: https://i.stack.imgur.com/JQGpA.png This jumbotron was generated using the following code: <div class="col-sm-2"> <div class="jumbotron jumbotron-fluid top-space"> <div ...

htmlbootstrap-4

Passing arguments with $emit - Vue

Here is a simple method to handle alerts using $emit. But when passing arguments, it seems like the event is not being triggered at all. The goal is to update the value of alert with the result. Listening for the event on mount: this.$eventHub.$on(' ...

javascriptvue.js

Issue with enlarging images using UL and LI tags persists

After implementing the code for a simple image enlarge feature (showing a QR code image when the user hovers over the icon), I noticed an issue. Interestingly, the same code is used on two designs, but it's not working on one of them. To view the pr ...

htmlcss

Issue with ImageButton Not Triggering UpdatePanel in Asp.net

I am encountering an issue with a button click event inside an asp.net update panel. Here is my code: My Aspx Code : <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional"> <ContentTemplat ...

c#asp.netbootstrap-5

Creating an SVG element that adjusts to the size of its parent container: tips and tricks

I'm attempting to achieve the following: Displaying an SVG square (with a 1:1 aspect ratio) inside a div element. When the width of the div is greater than its height, the square should adjust to fit within the container based on the height (red box ...

csssvg

Conceal the Download Button Effectively

I operate a website for playing audio files and I am looking to prevent users from downloading the sounds using the download button in the HTML audio element. Here is what I came up with: <audio src="sound.mp3" controls controlsList="nodownload">< ...

html

Debugging in Javascript involves pausing or breaking at every instance of a javascript function being called

I am currently working on unraveling a complex legacy JavaScript codebase, and I'm finding it challenging to determine where to place breakpoints (having to locate the files and set a breakpoint in Firebug, etc). Is there a way for Firebug to automat ...

javascriptdebuggingfirebugbreakpoints

Issue with Bootstrap carousel - the carousel.on method is not recognized

I have implemented a standard Bootstrap carousel in my project: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can we ensure that the function is called when a node is located?

Presently, I am executing the following code but it is causing the call stack to slow down; how can I optimize this using either an async await or more advanced promise functions? I have a dynamic node that is added to the DOM at different times dependin ...

javascriptasynchronousecmascript-6async-await

The hyperlink in the HTML code is malfunctioning

While working on a Wix website, I encountered an issue with the code snippet below: // JavaScript var countries = [ { name: 'Thailand', link: 'www.google.com' }, { name: 'Tanzania', link: '' }, { name: &ap ...

javascripthtmlcss

Steps to reveal a div when a button is clicked within a v-for loop using VueJS

Context In my code, I am utilizing a v-for loop to display sets of buttons and corresponding input fields. Each button is supposed to trigger the display of its respective input field upon being clicked. Issue However, the problem arises when the button ...

javascriptvue.jsfor-loopif-statementvuejs2

The magic of CSS Pseudo-classes in Inline Styling

For the longest time, I've been under the impression that you cannot include in-line :hover{..} styles to an element. However, recently I stumbled upon this page which showcased examples like this. <a href="http://www.w3.org/" s ...

htmlcss

Slow auto page refresh in local development for Angular2 on Windows can be quite frustrating

Recently diving into angular2 and following the heros tutorial from docs. Struggling with a sluggish development experience while working with angular2. It's taking approximately 5 seconds for angular2 to recognize changes in files, followed by anothe ...

javascriptnode.jstypescriptangular

The Mongodb database is failing to recognize updates made to the Mongoose schema

I have already created my database with the following schema: const ProjectSchema = new mongoose.Schema({ name: { type: String }, description: { type: String }, client: { type: mongoose.Schema.Types.ObjectId, ref: 'client& ...

javascriptnode.jsmongodbmongooseschema

The target for CountUp is not defined in React.js and is either null or undefined

I'm experiencing an issue with React.js while using the CountUp library. I've tried everything I can think of, but so far, nothing has worked. I even created a state to check if the component is ready to render CountUp. I'm unsure whether t ...

javascriptreactjsnext.js

Having issues with the CSS block in my Jekyll dropdown navbar

I have been exploring resources from both w3schools and another website to create a navigation bar in Jekyll using frontmatter. However, I am running into issues with the block property in CSS. Most of the navbar is functioning properly, except for the dro ...

htmlcssjekyll

What is the method for generating a 2D array in JavaScript when the array's length is unknown?

I'm trying to create a 2D array that groups animals by their first letter of the alphabet. However, the output is not what I expected. I want each letter to have its own sub-array with corresponding animal names. Here's the code I tried: functio ...

javascriptarraysloops