Issue with Bootstrap tabs not updating content on multiple clicks

Recently, I have been experimenting with implementing tabs on one of my webpage. Here is the code snippet I have been working with.

<div class="row justify-content-between">
    <div class="col-lg-3">
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between text-success ml-4" href="#1" data-toggle="tab">
            <h4 class="text-success size">Vehicles</h4>
        </a>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#2" data-toggle="tab">
            <h4 class="text-success size">Battery</h4>
        </a>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#3" data-toggle="tab">
            <h4 class="text-success size">Charging</h4>
        </a>
    </div>

    <div class="tab-content  col-lg-9">
        <div class="tab-pane active" id="1">
            <!-- Content here -->
        </div>

        <div class="tab-pane" id="2">
            <!-- content here -->
        </div>

        <div class="tab-pane" id="3">
            <!-- content here -->
        </div>
    </div>
</div>

What I have tried so far is to create a layout with two columns - one for the tab links and the other for displaying content based on the clicked link. Initially, the code seems to work fine as the content changes when the links are clicked for the first time. However, subsequent clicks do not update the content. It only seems to work once. Can anyone suggest a solution to make the tab functionality work seamlessly no matter how many times the links are toggled?

htmlcssbootstrap-4bootstrap-tabs

Answer №1

It seems like you forgot to include the 'nav nav-tabs' list container for your nav-tabs. As a result, all your links are currently functioning as independent internal links, allowing only one click. To fix this issue, please refer to the updated code below:

Updated Code:


<div class="row justify-content-between">
    <div class="col-lg-3">
        <ul class="nav nav-tabs">
            <li class="active"><a class="nav-link p-3 mb-2 sidebar-link justify-content-between text-success ml-4" href="#1" data-toggle="tab">
                <h4 class="text-success size">Vehicles</h4>
            </a>
            </li>

            <li>
                <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#2" data-toggle="tab">
                    <h4 class="text-success size">Battery</h4>
                </a>
            </li>
            <li>
                <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#3" data-toggle="tab">
                    <h4 class="text-success size">Charging</h4>
                </a>
            </li>
        </ul>
    </div>

    <div class="tab-content col-lg-9">
        <div class="tab-pane fade in active" id="1">
            <!-- Content here -->
        </div>

        <div class="tab-pane fade" id="2">
            <!-- content here -->
        </div>

        <div class="tab-pane fade" id="3">
            <!-- content here -->
        </div>
    </div>
</div>

Please review the updated code and let me know if it meets your requirements.

Answer №2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>



<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <nav>
        <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
          <a class="nav-item nav-link active " role="tab" aria-selected="true" href="#1" data-toggle="tab">
            <h4 class="text-success size">Vehicles</h4>
          </a>
          <a class="nav-item nav-link " href="#2" role="tab" aria-selected="false" data-toggle="tab">
            <h4 class="text-success size">Battery</h4>
          </a>
          <a class="nav-item nav-link " href="#3" role="tab" aria-selected="false" data-toggle="tab">
            <h4 class="text-success size">Charging</h4>
          </a>
        </div>
      </nav>
  <div class="tab-content">
        <div class="tab-pane active" id="1">
          <!-- Content here -->
          <h1>Hello</h1>
        </div>
        <div class="tab-pane" id="2">
          <!-- content here -->
          <h1>hi</h1>
        </div>
        <div class="tab-pane" id="3">
          <!-- content here -->
          <h1>why</h1>
        </div>
      </div>
    </div>
  </div>
</div>

Make sure to test this code. I'm confident it will do the job for you.

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

Eliminate the standard blue border that appears when control-clicking on table elements

I've encountered this question before, but unfortunately none of the solutions provided have worked for me. Some things I've attempted are: Using event.preventDefault() - did not produce the desired result. Removing user-select from CS ...

javascripthtmlcss

Choosing custom element children once they're connected to the DOM: A guide

My goal is to retrieve the value of transaction-name__inputbox when the user clicks on the transaction-add__button. The function transactionAddHandler is triggered upon clicking the button. However, my attempt to select this element using document.querySe ...

javascripthtmltypescript

Organized grid design where every element occupies its own required space

Here's the current image I have displayed: https://i.sstatic.net/qKH8x.jpg This image is being styled by the following code: .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); } I've been searching for a solution ...

htmlcssflexboxcss-grid

Struggling with aligning items vertically in Bootstrap 4?

Despite my experience in programming, I am struggling with CSS and HTML. I am attempting to create a simple "Login Page" for my personal web application. GitHub: https://github.com/n-winspear/cashflow-webapp After trying various solutions suggested in ot ...

htmlcssbootstrap-4

Is it feasible to create a tabbed layout that is responsive?

Would it be possible to create a layout like this and how would you go about doing it? The container has borders, except at the top where the tabs are located. Only the selected tab should have a border at the top. The text on the tabs should be centered, ...

htmlcsstabsresponsive-design

conceal elements using the <option> class隐藏

Although it seems like a simple task, I'm struggling to make it work. I created a form where the user can select a month from a list using the tags: <select> <option> When the selection is changed, the class .gone from the day SELECT is ...

javascripthtmlcssformshtml-select

How to properly position icons alongside text in Bootstrap 4 navbar

I'm having trouble getting the icon to display before the text in the navigation button. It keeps showing up above the text instead. I also need the icon to be vertically aligned with the text. I know this should be an easy fix, but I can't seem ...

texticonsalignmentbootstrap-4navbar

Having trouble with the Jquery click event not functioning on an interactive image map in Chrome browser

I currently have an interactive image-map embedded on my website. Here is the HTML code: <div id="italy-map" class="affiancato verticalmenteAllineato"> <div id="region-map"> <img src="./Immagini/transparent.gif" title="Click on ...

javascriptjqueryhtmlcssimagemap

Utilize Bootstrap button dropdown to automatically assign a selected value to a list item

I have a form with a select box that transforms into a bootstrap button after the page loads. However, I am unable to set the selected value for the converted bootstrap button drop-down li. <button type="button" class="btn dropdown-toggle btn-default" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for Implementing Bootstrap 4 Carousel in Rails 5

I am currently facing an issue with my Rails photo gallery setup on the new Bootstrap 4.1 carousel. The images are displaying decked, likely due to how they are being iterated over. I have not found a solution yet that allows for dynamic loading of the ima ...

ruby-on-railsajaxbootstrap-4

Unable to eliminate italicized text within collapsible content

Despite having no programming experience, I am attempting to create a FAQ section for our help site using collapsible sections for the Q&A. While I've managed to achieve most of what I wanted, there is one element that stubbornly refuses to change. De ...

htmlcss

There is a complete absence of text appearing on the html page when Angular is

Currently, I am in the process of learning Angular during my internship. As part of the requirements, I have been tasked with developing a client-server application using Angular as the frontend framework and Spring as the backend solution. Within the proj ...

htmlangulartypescript

Place the span element above the div container

I recently created some social media buttons with share counters, but I'm facing an issue where the counter data appears inside the buttons rather than on top of them. Has anyone encountered this problem before? Is there a way to display the numbe ...

htmlcss

Showcase a Pair of Files Next to Eachother using HTML

I am a beginner with HTML and I am trying to accomplish a seemingly simple task. I have searched for similar questions and attempted the solutions provided, but none have worked for me. My goal is to have two documents displayed side by side on a web page ...

javascripthtmlcssimage

The Open Graph share debugger encounters a situation where it scrapes through an empty

Having trouble setting up Open Graph meta tags for a website? Even though the tags appear in the source when accessed through a browser, they don't show up in the OG debugger. The website I'm currently working on is located at spurafrika-org.ver ...

htmlnext.jsfacebook-opengraph

Arranging Check Boxes Side by Side

I am struggling to properly align the three checkboxes and tables next to each other. I have managed to get the checkboxes on the same row, but aligning them neatly has proven to be a challenge. Using Notepad++ as my development tool, I am facing formattin ...

javascripthtmlcss

Create a styled-components component that renders a cross inside a recognizable object surrounded by borders

Currently developing an Object Recognition app and aiming to add a border around the object along with a cross that indicates the center. The border has been successfully implemented, but having trouble creating the cross. The plan is to add two more boxes ...

javascriptcssreactjsstyled-componentstensorflow.js

Boosting the specificity of Material UI override styles

I came across a question about Material UI Overriding styles with increased specificity that seemed related to my issue, but I couldn't apply the solution to my problem. My problem involves a vertical Slider with marks, and I am trying to remove the ...

cssreactjsmaterial-ui

The PHP content form is malfunctioning and not processing email submissions properly, resulting in the PHP code being

Following a tutorial, I attempted to create a basic contact form using PHP. As a beginner in PHP, I found the process fairly straightforward, but encountered some bugs in the code. Upon integrating the code on my website, clicking the submit button redirec ...

phpjqueryhtmlforms

Tips for identifying HTML tags that include a specific attribute automatically

Is there a way to automatically identify an HTML tag that contains a specific attribute like data-wow-delay? This query revolves around wow.js. The goal is to have the classes wow bounce added automatically to any HTML tag that has this particular attribu ...

javascripthtmlnext.jswow.js