The Bootstrap data-target and aria-controls attributes are failing to activate the designated id element

I have implemented various elements to toggle the display of information on my HTML website. While I've successfully created buttons, nav-tabs, and modals, clicking on the trigger element doesn't reveal the associated content. I've even double-checked by copying the exact code from the Bootstrap documentation, but it still doesn't work. Can someone please point out what I might be missing? Thank you.

<ul class="nav nav-tab" id="tablaTabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="compara-tab" data-toggle="tab" href="#compara" role="tab" aria-controls="compara"aria-selected="true">Comparador</a>      </li>
      <li class="nav-item">
        <a class="nav-link" id="pagos-tab" data-toggle="tab" href="#pagos" role="tab" aria-controls="pagos" aria-selected="false">Pagos</a>      </li>
      <li class="nav-item">
        <a class="nav-link" id="valor-tab" data-toggle="tab" href="#valor" role="tab" aria-controls="valor" aria-selected="false">Valoraciones</a>      </li>
    </ul>

    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="compara" role="tabpanel" aria-labelledby="compara-tab">
        <div class="table-responsive">
          <table class="table">
            <thead class="thead-light">
              <th>Núm pax (precio por día)</th>
            </thead>
            <tbody>
              <tr><td>1 persona <span class="oi oi-person" style="padding-left: 7px;"></span></td>      
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="tab-pane fade" id="pagos" role="tabpanel" aria-labelledby="pagos-tab">
       </div>

      <div class="tab-pane fade" id="valor" role="tabpanel" aria-labelledby="valor-tab">
        Ratings
      </div>
    </div>
  </div>

Apart on another file: 

<div class="modal fade" id="contacto" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Contact</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="col-form-label">Email:</label>
              <input type="text" class="form-control" id="recipient-name">
            </div>
            <div class="form-group">
              <label for="message-text" class="col-form-label">Mensaje:</label>
              <textarea class="form-control" id="message-text"></texrea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-succes">Send</button>
        </div>
      </div>
    </div>
  </div>

<!-- All necessary library imports exist -->

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<script src="node_modules/jquery/dist/jquery.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="node_modules/popper.js/dist/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"
    integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
    crossorigin="anonymous"></script>


Answer №1

Are all the paths to your CSS and JavaScript files correct?

Check your JavaScript files for any coding errors as they may prevent subsequent JavaScript from running properly.

I tested your code with the addition of CSS and JS files from a CDN, and it worked perfectly:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer №2

I successfully resolved the issue without encountering any errors in the code. The only modification I made was changing the script to include:

    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

After making this adjustment, the functionality appears to be working properly. Initially, I had placed the CSS references in the head section, but it turned out that this was not causing any issues.

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

What can I do to enhance the responsiveness of this rotating cube?

Here I am working with a rotating cube on the web. Check out my similar code. I am attempting to make it so that when the browser size is reduced, the table and cube also shrink in size accordingly without changing their position relative to each other. I ...

Using Angular to create a nested routerLink within a routerLink

Is there a way to dynamically change the content of a page loaded using router link without duplicating the HTML code for the header and footer sections each time? I want to navigate between different pages with routerLink and have only the main content ar ...

Delete auto-generated list using handlebars JS

I have successfully created a dynamic list using Handlebars.js and its template. However, I am now facing confusion on how to remove or delete items from the list using a function or specific code. As I am new to Handlebars, I would appreciate any help. ...

Using Vue and vue-multiselect to create interactive options based on the selected language

I'm currently developing a Vue website with multilingual support. The chosen language is stored in a Vuex store and accessed through the computed property lang, like so: lang(){ return this.$store.state.lang } I use this lang property in v-if cond ...

Distinguishing a button based on its class

I am currently designing a website to showcase personalized store products. Each product info box includes a button, as shown in the screenshot below: https://i.sstatic.net/hiXiY.png Upon clicking on the "Options" button, users can view information about ...

Adding space around images in JavaFX

Just a quick question. I'm wondering if there is a way to apply padding to an ImageView using CSS in JavaFX. I've attempted insets, padding, and other methods with no success. Alternatively, can the same effect be achieved with a Text Object? ...

Automatic switching between Bootstrap 5 tab panes at precise time intervals

Is there a way to have the Bootstrap 5 tab-pane automatically switch between tabs at set intervals, similar to a Carousel? I found a code snippet on this link, but it appears to be outdated and only works for Bootstrap 3. Could someone assist me in updati ...

What is the best way to set breakpoints on Material UI components?

Currently, I am exploring material-ui and I'm curious if there is a way to set all breakpoints at once. The code snippet below seems quite repetitive. Is there a more efficient method to achieve this? <Grid xs={12} sm={12} md={12} lg={12} xl={12} ...

Loading jQuery on an ajax request

The loader is working with the code now, but it is not replacing and calling the URL. The ajax url call should be placed within searchable. <button onclick="myFunction()">LOAD</button><br /><br /> <div class="spinner bar hide" ...

Line breaks showing up on the page that are not present in the HTML source code

Why are unwanted line breaks appearing in my rendered DOM that are not in the source code, causing the content to be displaced? And how can I resolve this issue? Below is the code snippet: <div class="float-left" style="position:relative;left:15px"> ...

Utilizing Shadow Root and Native Web Components for Seamless In-Page Linking

An illustration of this issue is the <foot-note> custom web component that was developed for my new website, fanaro.io. Normally, in-page linking involves assigning an id to a specific element and then using an <a> with href="#id_name&quo ...

Tips for arranging divs in Bootstrap 5 to position one above the other

I have chosen to utilize Bootstrap 5 for my website project with the aim of enhancing its responsiveness on all devices. Specifically, I am seeking a way to ensure that when visitors access the site from a mobile device, the image-containing div appears a ...

JavaScript causing attribute() variable to malfunction in CSS animation

I am attempting to implement a CSS animation using three files. Below is the HTML file: <html lang="en"> <head> <link rel="stylesheet" type="text/css" class = "tag" href="../css/style.css" ...

Arranging the final item in the empty space above the div section using Flexbox

Kindly review this code for additional details. Take a look at the image above for a clearer understanding. On the right side of the image, you will notice that the last row contains two items and the second row has one empty slot. I need to rearrange one ...

designing a presentation with customizable durations for each slide

I am trying to implement a slideshow using the slides.js jquery plugin and I have a specific requirement for the duration of each slide. My goal is to have the first slide, which contains an embedded video, display for 7 seconds, while the subsequent slid ...

Is there a method in VBA to access elements generated by javascript code?

After spending several hours conducting thorough research on Google (including browsing StackOverflow), I've been trying to find a method that would allow me to target HTML elements generated by JavaScript in VBA. For instance, using ie.Document.getE ...

Creating a Slack-inspired interface with a Bootstrap 4 fixed bottom message box nested within a column

I'm attempting to create an interface similar to Slack, featuring a message box fixed at the bottom using Bootstrap 4. However, when I use the fixed-bottom class (where my custom message-box col is located), it spans the entire width of the window, wh ...

My a:hover isn't functioning properly and my <a> tag is not redirecting to the link when clicked. Can anyone help me troubleshoot these issues?

I've created a website with multiple stacked sections. Each section is contained within a div with the class class="concertDiv". In one of these sections, I want to display an album cover on the left side and three clickable text rows on the right sid ...

What could be causing a .ts file to not play correctly?

I need help downloading a video from the following URL: I have successfully downloaded the file, but none of my video players can play it. Could it be encrypted? Is there a solution to make it work? Appreciate any help! ...

Error in table layout caused by asynchronous .get jQuery function

I am facing a challenge in populating a timetable with specific information for each cell from a database. The table is being dynamically refreshed using the following function: function refreshTable() { //Form values var park = $('#Park&apos ...