Active bootstrap navigation tabs

I am struggling to maintain the active tab in my left navigation tab. The issue arises when I load the page with the first tab active, and then click on another tab - the new tab becomes active, but the first tab remains active as well. I would like only the clicked tab to be active.

Here is my HTML:

    <div id="container">
    <div class="row" style="margin-left: 0px;">
        <div class="col-xs-2">
            <h4><i class="glyphicon glyphicon-briefcase"></i>
                <small><b>Partner</b></small>
            </h4>
            <ul class="nav nav-tabs tabs-left">
                <li class="active"><a href="#partnerInfo" data-toggle="tab">Partner Core Info</a></li>
                <li><a href="#partnerUsers" data-toggle="tab">Partner Users</a></li>
                <li><a href="#partnerProperties" data-toggle="tab">Partner Properties</a></li>
                <li><a href="#partnerSalesRep" data-toggle="tab">Partner Sales Reps</a></li>
            </ul>
            <h4><i class="glyphicon glyphicon-user"></i>
                <small><b>Customer</b></small>
            </h4>
            <ul class="nav nav-tabs tabs-left">
                <li><a href="#customerUsers" data-toggle="tab">Customer Users</a></li>
                <li><a href="#customerProperties" data-toggle="tab">Customer Properties</a></li>
                <li><a href="#customerBilling" data-toggle="tab">Customers Biling</a></li>
            </ul>
        </div>
        <div class="col-xs-10">
            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="partnerInfo">
                    Messages Tab.
                </div>
                <div class="tab-pane" id="partnerUsers">
                    Messages Tab.
                </div>
                <div class="tab-pane" id="partnerProperties">Settings Tab.</div>
                <div class="tab-pane" id="partnerSalesRep">Settings Tab.</div>
                <div class="tab-pane" id="customerUsers">Settings Tab.</div>
                <div class="tab-pane" id="customerProperties">
                    Messages Tab.
                </div>
                <div class="tab-pane" id="customerBilling">Settings Tab.</div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

This is how I have styled my CSS:

    .tabs-left, .tabs-right {
  border-bottom: none;
  padding-top: 2px;
}
.tabs-left {
  border-right: 1px solid #ddd;
}
.tabs-right {
  border-left: 1px solid #ddd;
}
...
(Additional CSS code goes here)
...

Does anyone have an idea of what might be causing this issue? Could it possibly be related to my CSS?

Thank you!

htmlcsstwitter-bootstrap

Answer №1

There seems to be an issue with having two separate nav elements. To resolve this, you can combine them into a single element as shown in the following jsfiddle: Bootstrap navigation tabs, with title dividers

It appears that the reason for introducing this issue was to include Navigation Title dividers. You can achieve this by creating <li> elements with appropriate text and icons within the nav. Here is how the modified nav would look like:

 <ul class="nav nav-tabs tabs-left">
           <li class="divider">
               <h4><i class="glyphicon glyphicon-briefcase"></i>
                <small><b>Partner</b></small>
                </h4>
            </li>
                <li class="active"><a href="#partnerInfo" data-toggle="tab">Partner Core Info</a></li>
                <li><a href="#partnerUsers" data-toggle="tab">Partner Users</a></li>
                <li><a href="#partnerProperties" data-toggle="tab">Partner Properties</a></li>
                <li><a href="#partnerSalesRep" data-toggle="tab">Partner Sales Reps</a></li>
            <li class="divider">            <h4><i class="glyphicon glyphicon-user"></i>
                <small><b>Customer</b></small>
            </h4></li>
                <li><a href="#customerUsers" data-toggle="tab">Customer Users</a></li>
                <li><a href="#customerProperties" data-toggle="tab">Customer Properties</a></li>
                <li><a href="#customerBilling" data-toggle="tab">Customers Biling</a></li>
            </ul>

Answer №2

I have integrated the necessary code fixes and also included a jQuery script in the head section to ensure proper functionality. I have thoroughly tested it to confirm its effectiveness.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="container">
    <div class="row" style="margin-left: 0px;">
        <div class="col-xs-2">
            <h4><i class="glyphicon glyphicon-briefcase"></i>
                <small><b>Partner</b></small>
            </h4>
            <ul class="nav nav-tabs tabs-left" role="tablist">
                <li role="presentation" class="active"><a href="#partnerInfo" aria-controls="partnerInfo" data-toggle="tab">Partner Core Info</a></li>
                <li role="presentation"><a href="#partnerUsers" aria-controls="partnerUsers" data-toggle="tab">Partner Users</a></li>
                <li role="presentation"><a href="#partnerProperties" aria-controls="partnerProperties" data-toggle="tab">Partner Properties</a></li>
                <li role="presentation"><a href="#partnerSalesRep" aria-controls="partnerSalesRep" data-toggle="tab">Partner Sales Reps</a></li>
            </ul>
            <h4><i class="glyphicon glyphicon-user"></i>
                <small><b>Customer</b></small>
            </h4>
            <ul class="nav nav-tabs tabs-left" role="tablist">
                <li role="presentation"><a href="#customerUsers" aria-controls="customerUsers" role="tab" data-toggle="tab">Customer Users</a></li>
                <li role="presentation"><a href="#customerProperties" aria-controls="customerProperties" role="tab" data-toggle="tab">Customer Properties</a></li>
                <li role="presentation"><a href="#customerBilling" aria-controls="customerBilling" role="tab" data-toggle="tab">Customers Biling</a></li>
            </ul>
        </div>
        <div class="col-xs-10">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane" id="partnerInfo">
                    Messages Tab.
                </div>
                <div role="tabpanel" class="tab-pane" id="partnerUsers">
                    Messages Tab.
                </div>
                <div role="tabpanel" class="tab-pane active" id="partnerProperties">Settings Tab.</div>
                <div role="tabpanel" class="tab-pane" id="partnerSalesRep">Settings Tab.</div>
                <div role="tabpanel" class="tab-pane" id="customerUsers">Settings Tab.</div>
                <div role="tabpanel" class="tab-pane" id="customerProperties">
                    Messages Tab.
                </div>
                <div role="tabpanel" class="tab-pane" id="customerBilling">Settings Tab.</div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>

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

Steps for adding a delete icon to a text input field and enabling the functionality to delete text

In the code snippet below, I am creating a text input field: <input type="text" class="signup-input text-value" name="" placeholder="e.g. <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d48554c405d41486d">[email pro ...

javascriptjqueryhtmlcss

Mapping the Way: Innovative Controls for Navigation

Currently, I am utilizing the HERE maps API for JavaScript. However, I would like to customize the design of the map controls similar to this: Below is an example for reference: HERE EXAMPLE Is it feasible to achieve this customization? ...

javascriptcssmapshere-api

Navigating to a specific div within a container with vertical overflow in an Angular application

I am working on an angular application where I have a left column with a scrollable div that has overflow-y: auto;, and a right column with bookmark links that jump to sections within the scrollable container. I am currently facing two challenges: 1 - Co ...

htmlangulartypescript

Struggling to retrieve the dynamic select list information from HTML and pass it to PHP. Any suggestions or guidance would be greatly

<form method="POST" name="mailform" action="sendmail.php"> <fieldset> <?php require_once("mysql_connect.php"); $sql = mysql_query( " SELECT NAME FROM TABLE WHERE ID = ( SELECT ID FROM TABLE2 WHERE COLUMN = '$USERNAME') ORD ...

phphtmlmysql

What is the method to determine the quantity of cards in a single row within a card-group using Bootstrap 5?

What is the best way to limit the number of cards shown in a Bootstrap 5 card-group to 5 cards per row? Any suggestions for achieving this? ...

twitter-bootstrapbootstrap-4bootstrap-5

Ensure that the sidebar automatically scrolls to the bottom once the main content has reached the bottom

I am facing an issue with a sticky sidebar that has a fixed height of calc(100vh-90px) and the main content. The sidebar contains dynamic content, which may exceed its defined height, resulting in a scrollbar. On the other hand, the main content is lengthy ...

javascriptcssreactjs

The Django static files were uncooperative and refused to function

I've encountered an issue with my HTML files while using Django. Some files work perfectly fine when I load static files, but others don't seem to cooperate. I'm perplexed as to why this inconsistency exists! Have I overlooked something impo ...

djangohtmldjango-templates

Why are XAxis categories appearing as undefined in tooltip when clicked?

[When clicking on the x-axis, the values go from 0 to 1. I need the x-axis categories values to display on click event. When hovering over the x-axis value, it shows properly, but clicking on the x-axis does not show the correct values] Check out this fid ...

javascriptjquerycsshighcharts

The horizontal overflow in the HTML code was unsuccessful

I stumbled upon an interesting issue where I applied a div with specific styling: overflow-x: scroll However, the outcome was not as expected. Instead of overflowing, the content simply started on a new line. Here is the source code for reference: & ...

javascriptjqueryhtmlcss

Django/Bootstrap: experiencing issues with certain default styles not functioning correctly like nav-tabs and buttons

When using Django in combination with Bootstrap v5, I am encountering an issue where the "nav-tabs" class is not being styled as tabs and gray buttons are not taking on the pill style. It appears that only a portion of Bootstrap is functioning correctly. W ...

htmlcssdjangobootstrap-5

Dynamic Filtering with jQuery List

I'm attempting to create a dynamic filter list on keypress event. For example, if I type "It" into the input field, the elements that do not match this value will be hidden. I'm unsure if the code structure I have implemented below effectively ac ...

javascriptjqueryhtml

Tapping on content within SPAN elements with Selenium Webdriver in Java

Here is an example of what HTML code might look like: <td id="id26a" class="doclisting-name link" style="width: 319px; min-width: 319px;"> <span id="id26b" title="Document"> <span class="ie-fallback-marker"> sample text </span> ...

javaseleniumhtml

To apply a background color to a specific <td>, simply enter the position number into the 3rd textbox using JavaScript

I have successfully implemented three textboxes in my project. The first textbox is for entering a number as the row count The second textbox is for entering a number as the column count The third textbox is used to specify a position in the table that ...

javascripthtmlfrontendweb-frontend

What is causing the issue with CSS properties and media queries not being effective on specific elements?

I have been experimenting with React and SCSS to create a portfolio page. Although I am familiar with these tools, I recently encountered issues where certain style changes were not reflecting in the browser. One specific problem involved styling the head ...

cssreactjssassbrowserdeveloper-tools

Is the HTML Page loading before the AJAX call is made?

On my HTML Page, I have a button tag that looks like this: <button ng-hide="alreadyFreinds()" type="button" class="btn btn-primary btn-lg">Friend</button> However, when attempting to access certain parts of the alreadyFriends function shown b ...

javascripthtmlajaxangularjs

Simultaneously Implementing JQuery's fadeIn and Load Functions

Currently, I am utilizing the Jquery load function to refresh specific parts of a webpage. The page loaded by the load function only displays content in the div if certain database parameters are satisfied. However, my issue is that when new content is ren ...

jqueryhtmlfadein

How to Show an Image in a Search Bar Using HTML

As I put the finishing touches on this table, I decided to add a search function to it. However, I encountered an issue with the search bar design. I wanted to incorporate a search icon png file as the background image, similar to the example showcased on ...

htmlcss

What is the recommended alternative for the outdated or non-standard "align" element in use?

Here is the code I am working with in HTML: <td align="center"> After running ReSharper in Visual Studio 2008, I received this error message: "Element 'align' is obsolete or nonstandard" Can someone please advise on the correct replac ...

htmlcsscenteralignment

What is the best way to include two class names within a single div using Next.js?

Struggling to include two different CSS classes into a single div element, I encountered some issues. For reference, here is a screenshot: https://i.stack.imgur.com/UuCBV.png https://i.stack.imgur.com/sHNwq.png My code snippet looks like this: blog.js ...

javascriptcssreactjsnext.js

Is it possible to utilize the Wicket:id for generating CSS?

Can the wicket:id attribute of an element or component be used for CSS styling instead of the "class" attribute? For example: .tooltipster-arrow span, .column-shifter { display: block; width: 0; height: 0; position: absolute; } Let&apos ...

javahtmlcsswicketstyling