Create Two Menus with Bootstrap 4: One to Display and One for Active Menu Item

My menu is large and needs to be split into columns for mobile and desktop viewing. I have organized it as follows:

<div class="col-xl-12 col-md-12 col-6 first-set-skills">
  Menu 1
</div>
<div class="col-xl-12 col-md-12 col-6 second-set-skills">
  Menu 2
</div>

The issue arises when I want both menus to function as one cohesive unit. Ideally, selecting an item from either menu should only display one result and highlight only one active menu item. However, the separate divisions cause both menus to show two active items in total:

https://i.sstatic.net/KUPEN.png

I'm looking for a way to make both menus act as one despite being separated by div containers.

Here is the JSFiddle link: https://jsfiddle.net/prozik/qLu9pfje/12/

You can refer to the Bootstrap documentation for vertical nav components that I used here.

Below is the code snippet:

<!-- menu 1 -->
<div class="col-xl-12 col-md-12 col-6">
  <div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>


<!-- menu 2 -->
<div class="col-xl-12 col-md-12 col-6">
   <div class="nav flex-column nav flex-column nav-pills"  role="tablist" aria-orientation="vertical">
    <a class="nav-link active" id="v-pills-about-tab" data-toggle="pill" href="#v-pills-about" role="tab" aria-controls="v-about-home" aria-selected="true">About</a>
    <a class="nav-link" id="v-pills-company-tab" data-toggle="pill" href="#v-pills-company" role="tab" aria-controls="v-pills-company" aria-selected="false">Company</a>
    <a class="nav-link" id="v-pills-carreers-tab" data-toggle="pill" href="#v-pills-carreers" role="tab" aria-controls="v-pills-carreers" aria-selected="false">Careers</a>
    <a class="nav-link" id="v-pills-location-tab" data-toggle="pill" href="#v-pills-location" role="tab" aria-controls="v-pills-location" aria-selected="false">Location</a>
  </div>
</div>



<div class="tab-content" id="v-pills-tabContent">
  <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> Home content </div>
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> Profile  content</div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> Message content </div>
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> Settings  content</div>
  <div class="tab-pane fade" id="v-pills-about" role="tabpanel" aria-labelledby="v-pills-about-tab"> About  content</div>
  <div class="tab-pane fade" id="v-pills-company" role="tabpanel" aria-labelledby="v-pills-company-tab-tab"> Company  content</div>
  <div class="tab-pane fade" id="v-pills-carreers" role="tabpanel" aria-labelledby="v-pills-carreers-tab"> Carreers  content</div>
  <div class="tab-pane fade" id="v-pills-location" role="tabpanel" aria-labelledby="v-pills-location-tab"> Location  content</div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Utilize a jQuery workaround to achieve the desired result.

Include the following code:

var $ = jQuery;
$("#tabGroupTwo").children().click(function(e){
  $("#tabGroupOne").children().each(function(f){
    $(this).removeClass("active");
  });
});

$("#tabGroupOne").children().click(function(e){
  $("#tabGroupTwo").children().each(function(f){
    $(this).removeClass("active");
  });
})

Add an id attribute to the nav-pills div. Refer to the code snippet below: 

var $ = jQuery;
$("#tabGroupTwo").children().click(function(e){
  $("#tabGroupOne").children().each(function(f){
    $(this).removeClass("active");
  });
});

$("#tabGroupOne").children().click(function(e){
  $("#tabGroupTwo").children().each(function(f){
    $(this).removeClass("active");
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">

  <!-- menu 1 -->
  <div class="col-xl-12 col-md-12 col-6">
    <div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical" id="tabGroupOne">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>


  <!-- menu 2 -->
  <div class="col-xl-12 col-md-12 col-6">
    <div class="nav flex-column nav flex-column nav-pills" role="tablist" aria-orientation="vertical" id="tabGroupTwo">
      <a class="nav-link" id="v-pills-about-tab" data-toggle="pill" href="#v-pills-about" role="tab" aria-controls="v-about-home" aria-selected="true">About</a>
      <a class="nav-link" id="v-pills-company-tab" data-toggle="pill" href="#v-pills-company" role="tab" aria-controls="v-pills-company" aria-selected="false">Company</a>
      <a class="nav-link" id="v-pills-carreers-tab" data-toggle="pill" href="#v-pills-carreers" role="tab" aria-controls="v-pills-carreers" aria-selected="false">Careers</a>
      <a class="nav-link" id="v-pills-location-tab" data-toggle="pill" href="#v-pills-location" role="tab" aria-controls="v-pills-location" aria-selected="false">Location</a>
    </div>
  </div>



  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> Home content </div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> Profile content</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> Message content </div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> Settings content</div>
    <div class="tab-pane fade" id="v-pills-about" role="tabpanel" aria-labelledby="v-pills-about-tab"> About content</div>
    <div class="tab-pane fade" id="v-pills-company" role="tabpanel" aria-labelledby="v-pills-company-tab-tab"> Company content</div>
    <div class="tab-pane fade" id="v-pills-carreers" role="tabpanel" aria-labelledby="v-pills-carreers-tab"> Carreers content</div>
    <div class="tab-pane fade" id="v-pills-location" role="tabpanel" aria-labelledby="v-pills-location-tab"> Location content</div>
  </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

Positioning a block element following an inline-block element

I am in possession of the following HTML code: <div id="wrapper"> <div class="inline-block"></div> <div class="inline-block"></div> <div class="inline-block"></div> <div class="block"></di ...

htmlcss

Customizing Bootstrap's carousel component

I stumbled upon this demonstration: http://www.bootply.com/94444. It's very close to what I've been searching for. Currently, it displays 3 slides in one view. I am interested in having only 2 slides in one view. Could someone please advise me ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

What is the best way to prevent the first option in a <select> element from moving up and down using jQuery?

Is there a way to make the first option in a select list non-selectable and keep it at the top when using up and down buttons? The value option should always remain on top. If "Author" is selected and the up button is clicked, nothing should change. The ...

javascripthtmljqueryjsp

Handling mousewheel events for child elements and their parent element

I developed a custom jQuery plugin that replaces the default scrollbar with my own, managing mousewheel and bar dragging events. The issue arises when I place content containing my custom scrollbar within another content also using my scrollbar. When I sc ...

javascriptjqueryhtmlcssmousewheel

What is the most effective method for generating dial images through programming?

Currently, I am in the process of creating a website that makes use of variously sized and styled dials to indicate progress. The filled portion of the dial represents how close an item is to being 100% complete. I am seeking a universal solution that wil ...

javascripthtmlcsssvgraphael

Angular 2 ngIf displaying briefly before disappearing

Encountering a strange issue with an Angular 2 ngIf statement where it appears on the page for a brief moment and then disappears. The content is visible, but it doesn't remain on the page. I suspect it might be related to some asynchronous behavior. ...

htmlangular

Is it possible to determine the number of pixels scrolled from the current position on the page, rather than just from the top

I am looking to implement a standard UX feature that involves changing an element on scroll. Currently, I have this jQuery code in place: $(document).scroll(function() { var scroll = $(document).scrollTop(); if (scroll >= 50) { $(". ...

javascriptjqueryhtmlcss

Using JavaScript to trigger an open dropdown menu in Bootstrap 4

I have a dropdown menu that is designed like this: <div id="actions" class="dropdown btn-group btn btn-outline-secondary" role="group"> <div id="actionToggle" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="fa ...

jquerybootstrap-4

"Showcasing data from MySQL database: Problem with Displaying Records

I am trying to display data from MySQL on my PHP page. Everything is working fine, but I have encountered an issue. I have two tables - Players and Combat. In the Players table, I have fields for username and unique_id. In the Combat table, I have field ...

phpmysqltwitter-bootstrap

Using Angular2 to store the contents of an HTML page in a variable

There is an HTML page located at this specific path: ./Help/HelpMenu/How-To-Bake-Pies.html I am attempting to extract the contents of this HTML page and store it as a string variable like this: private _content: string = ''; this.http.get("./ ...

htmlangularhttptypescript

Issues arising from padding in Laravel routes

Encountering an issue with my Laravel application. It seems that when the path is only one level deep, everything appears as expected. However, if the path extends to two levels deep, the padding-top disappears. https://i.sstatic.net/BqeiQ.jpg https://i. ...

csslaravelbootstrap-4

Adding padding to the top causes the scrollbar to hide at the bottom in Firefox

My HTML page includes the following configured DIV: <div id="contentDiv" style="padding-top: 20px; padding-left: 20px; overflow: auto; height: 100%;" > The content within this DIV is large enough to require a vertical scrollbar. When viewed in IE, ...

cssfirefoxscrollbarpadding

How can I make a Bootstrap 4 modal autoplay an iframe on page load?

My website features a full-screen background video that plays upon loading, and I want the same video to play when a user clicks the play button to open a modal. However, my issue is that the modal video (iframe) starts playing in the background as soon ...

jqueryhtmlcsstwitter-bootstrap

"Utilizing CSS exclusively in conjunction with a PHP API for seamless integration

My CSS is working only when inline, and I'm struggling to track down the reason for this issue. As a beginner in web design, I am unsure of what steps to take to troubleshoot the problem. Since I cannot open the console to check for errors, what facto ...

phphtmlcssapi

Transparent PNG slider images with fixed background

I am encountering a strange issue with one of our projects Here on We have an images-menu created using the Kwicks script. The problem arises when we use .png format images that are partially transparent. When these images slide over each other, the bott ...

jquerycsskwicks

When the page is scrolled, the div is fixed in place and a class is dynamically added. Some issues may

Greetings everyone, I have a webpage with two floating divs - one is about 360px wide and the other has an auto width. As the page scrolls, the left div is assigned a class that fixes it to the screen, allowing the other div to scroll. This functionality w ...

javascriptjqueryhtmlcss

Using Media Queries to Optimize Image Display for Higher Pixel Densities: @2x, @3x,

My current project involves supporting various pixel ratios on the website I am developing. I want to make sure that I include all necessary browser prefixes to ensure compatibility with a wide range of devices and browsers. While I am using SVGs whenever ...

imagecssmedia-queriesretina-display

Methods for Obtaining the Base URL Together with href Links

Currently, I find myself at this location: localhost/magento/dresses/adidas-t-shirt.html In my file, I have written the following: <a href="my/hello/">Click Here</a> When I click on Click Here, I am directed to: localhost/magento/dresses/ ...

phphtmlmagento

The bootstrap link is malfunctioning and the id "navbar" along with the class "navbar-collapse collapse" are not functioning properly

<div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="index.php">Home</a></li> <li><a href="admin.php"> Admin panel</a>& ...

twitter-bootstraptwitter-bootstrap-3bootstrap-4

Tips for positioning cards in html

I'm working on a layout with a container containing multiple cards. I want each card to align from the left border of the container to the right border, similar to the code snippet below. <html> <style> .container { display: flex; ...

htmlcssflexbox