My tab panels have problem with content width - it doesnt work with columns - it can't divide a tab-pane as col-md-7 and col-md-5 (look at screen below). I dont know how to make it works.
<div class="container py-5">
<div class="row py-3">
<div class="col-lg-12">
<div class="card h-100">
<div class="card-header py-3"><b>Działalność</b> | Zarządzanie</div>
<div class="card-body">
<div id="zarzadzanie" class="zarzadzanie d-flex align-items-start">
<div class="nav flex-column nav-pills me-5" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active my-2" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
Podstawowe</button>
<button class="nav-link my-2" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">
Kolorystyka</button>
<button class="nav-link my-2" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">
Adresy</button>
<button class="nav-link my-2" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">
Historia</button>
</div>
<!-- TAB-CONTENT -->
<div class="tab-content" id="v-pills-tabContent">
<!-- Ustawienia 1 --->
<div class="tab-pane fade show active pt-2" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="row pb-2">
<div class="col-md-7">
<p>Tabs can be used to contain </p>
</div>
<div class="col-md-5">dsdas</div>
</div>
</div>
<!-- Ustawienia 2 --->
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
</div>
<!-- Ustawienia 3 --->
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
</div>
<!-- Ustawienia 4 --->
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
</div>
<!-- END TAB-CONTENT-->
</div>
<!-- </> END TAB-CONTENT-->
</div>
</div>
</div>
</div>
</div>
</div>
I would be very grateful for your help guys.
Problem on image
I added w-100 to every parent and it works. To the tab-content and the tab-pane
Related
This Bootstrap 4 code sample is copied from this official documentation page: https://getbootstrap.com/docs/4.6/components/navs/#javascript-behavior
How do I link a specific page from a page footer link?
Something like: Profile
I'm using ASP.NET MVC and tried these two SO solutions without success:
https://stackoverflow.com/a/12138756/261010
https://stackoverflow.com/a/50290446/261010
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
</div>
<div class="col-9">
<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">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
</div>
I am using a bootstrap collapse functionality to show/hide some statistics, opens like a charm, but when closing, it does no animation and the arrow does not turn back down. What am I missing?
<div class="columna">
<section class="stadisticCard">
<div class="card chart-card">
<div class="card-body pb-0">
<h5 class="card-title font-weight-bold">Amount of food wasted each season in Spain</h5>
<p class="card-text float-left">Spanish Government • 2020</p>
<div class="float-right">
<button class="botonExpandir collapsed" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">
<i class="bi bi-arrow-up-circle"></i>
</button>
</div>
</div>
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card-body">
<ul class="nav nav-tabs nav-fill mb-3" id="pills-tab1" role="tablist">
<li class="nav-item ms-0" role="presentation">
<a class="linkStadisticas nav-link active" id="pills-home-tab1" data-toggle="pill" href="#pills-home1" role="tab" aria-controls="pills-home1" aria-selected="true">Statistics</a>
</li>
<li class="nav-item">
<a class="linkStadisticas nav-link" id="pills-profile-tab1" data-toggle="pill" href="#pills-profile1" role="tab" aria-controls="pills-profile1" aria-selected="false">Information</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="pills-tabContent1">
<div class="tab-pane fade show active" id="pills-home1" role="tabpanel" aria-labelledby="pills-home-tab1">
<canvas id="lineChart" class="lineChart" width="100%" height="100%"></canvas>
</div>
<div class="tab-pane fade" id="pills-profile1" role="tabpanel" aria-labelledby="pills-profile-tab1">
<p class=" textoStadisticas font-small text-muted mx-1">
Information about the statistics
</p>
</div>
</div>
</div>
</div>
</section>
</div>
You have to target [aria-expanded="true"] / [aria-expanded="false"] for expand/collapse Icon UI:
.botonExpandir[aria-expanded="true"] i::before {
content: "\f13a";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="columna">
<section class="stadisticCard">
<div class="card chart-card">
<div class="card-body pb-0">
<h5 class="card-title font-weight-bold">Amount of food wasted each season in Spain</h5>
<p class="card-text float-left">Spanish Government • 2020</p>
<div class="float-right">
<button class="botonExpandir collapsed" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">
<i class="bi bi-arrow-down-circle"></i>
</button>
</div>
</div>
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card-body">
<ul class="nav nav-tabs nav-fill mb-3" id="pills-tab1" role="tablist">
<li class="nav-item ms-0" role="presentation">
<a class="linkStadisticas nav-link active" id="pills-home-tab1" data-toggle="pill" href="#pills-home1" role="tab" aria-controls="pills-home1" aria-selected="true">Statistics</a>
</li>
<li class="nav-item">
<a class="linkStadisticas nav-link" id="pills-profile-tab1" data-toggle="pill" href="#pills-profile1" role="tab" aria-controls="pills-profile1" aria-selected="false">Information</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="pills-tabContent1">
<div class="tab-pane fade show active" id="pills-home1" role="tabpanel" aria-labelledby="pills-home-tab1">
<canvas id="lineChart" class="lineChart" width="100%" height="100%"></canvas>
</div>
<div class="tab-pane fade" id="pills-profile1" role="tabpanel" aria-labelledby="pills-profile-tab1">
<p class=" textoStadisticas font-small text-muted mx-1">
Information about the statistics
</p>
</div>
</div>
</div>
</div>
</section>
</div>
I have the following code:
<?php
$page_title = 'Welcome to JPR Technology';
include('./includes/header.html');
?>
<body>
<div class="d-flex align-items-start mt-5 ms-5">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-home"></i> Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"><i class="fa fa-calculator"></i> Calculator</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false"><i class="fa fa-calendar"></i> Date Form</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false"><i class="fa fa-database"></i> Register</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active ms-5" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/home.svg" alt="" width="72" height="57">
<h4>Home Page</h4>
<p>Welcome to JPR Technology Projects Ltd.</p>
<?php
include('./includes/footer.php');
?>
</div>
<div class="tab-pane fade ms-5" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/calculator.svg" alt="" width="72" height="57">
<?php
include('./calculator.php');
?>
</div>
<div class="tab-pane fade ms-5" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/calendar.svg" alt="" width="72" height="57">
<?php
include('./dateform.php');
?>
</div>
<div class="tab-pane fade ms-5" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/database.svg" alt="" width="72" height="57">
<?php
include('./register.php');
?>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="http://localhost:8082/bootstrap-5.0.0-beta2/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
This is how my screen looks like initially:
enter image description here
But when I navigate from tab to tab, the previous page does not clear properly:
enter image description here
Fix your bootstrap links
<?php
$page_title = 'Welcome to JPR Technology';
include('./includes/header.html');
?>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<div class="d-flex align-items-start mt-5 ms-5">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true"><i class="fa fa-home"></i> Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"><i class="fa fa-calculator"></i> Calculator</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false"><i class="fa fa-calendar"></i> Date Form</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false"><i class="fa fa-database"></i> Register</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active ms-5" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/home.svg" alt="" width="72" height="57">
<h4>Home Page</h4>
<p>Welcome to JPR Technology Projects Ltd.</p>
<?php
include('./includes/footer.php');
?>
</div>
<div class="tab-pane fade ms-5" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/calculator.svg" alt="" width="72" height="57">
<?php
include('./calculator.php');
?>
</div>
<div class="tab-pane fade ms-5" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/calendar.svg" alt="" width="72" height="57">
<?php
include('./dateform.php');
?>
</div>
<div class="tab-pane fade ms-5" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" data-toggle="button">
<img class="d-block mx-auto mb-4" src="./assets/database.svg" alt="" width="72" height="57">
<?php
include('./register.php');
?>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
I have created a layout with Bootstrap 4 pills. It is working fine on first time click and it is not working on second time. Suppose if we click on the menu1, menu2, menu3 on a sequence - tab content is loading, and again if I click the menu1 - tab content is not changing. I have done some mistake, but I am a little bit confused to achieve this scenario. I want the design as it is shown below.
Can anyone please correct my mistake, that is great help to me. Thanks in advance, below is my snippet, please view my result in the full window to check my layout design
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 mb-4">
<div class="">
<div class="nav nav-pills row">
<div class="nav-item col-md-1">
<a class="nav-lin active btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu1">Menu 1</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu2">Menu 2</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu3">Menu 3</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu4">Menu4 4</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu5">Menu 5</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu6">Menu 6</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu7">Menu 7</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu8">Menu 8</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu9">Menu 9</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu10">Menu 10</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu11">Menu 11</a>
</div>
<div class="nav-item col-md-1">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu12">Menu 12</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
<div class="nav nav-pills">
<div class="row">
<div class="nav-item col-md-1 mb-4">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu13">Menu 13</a>
</div>
</div>
<div class="row">
<div class="nav-item col-md-1 mb-4">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu14">Menu 14</a>
</div>
</div>
<div class="row">
<div class="nav-item col-md-1 mb-4">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu15">Menu 15</a>
</div>
</div>
</div>
</div>
<div class="col-md-10">
<div class="card">
<div class="card-body">
<div class="tab-content">
<div class="tab-pane container active" id="menu1">1</div>
<div class="tab-pane container fade" id="menu2">2</div>
<div class="tab-pane container fade" id="menu3">3</div>
<div class="tab-pane container fade" id="menu4">4</div>
<div class="tab-pane container fade" id="menu5">5</div>
<div class="tab-pane container fade" id="menu6">6</div>
<div class="tab-pane container fade" id="menu7">7</div>
<div class="tab-pane container fade" id="menu8">8</div>
<div class="tab-pane container fade" id="menu9">9</div>
<div class="tab-pane container fade" id="menu10">10</div>
<div class="tab-pane container fade" id="menu11">11</div>
<div class="tab-pane container fade" id="menu12">12</div>
<div class="tab-pane container fade" id="menu13">13</div>
<div class="tab-pane container fade" id="menu14">14</div>
<div class="tab-pane container fade" id="menu15">15</div>
<div class="tab-pane container fade" id="menu16">16</div>
<div class="tab-pane container fade" id="menu17">17</div>
<div class="tab-pane container fade" id="menu18">18</div>
</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="nav nav-pills">
<div class="row">
<div class="nav-item col-md-1 mb-4">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu16">Menu 16</a>
</div>
</div>
<div class="row">
<div class="nav-item col-md-1 mb-4">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu17">Menu 17</a>
</div>
</div>
<div class="row">
<div class="nav-item col-md-1 mb-4">
<a class="nav-lin btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu18">Menu18</a>
</div>
</div>
</div>
</div>
</div>
</div>
The examples in the documentation show that the structure with .nav-item wrapper above .nav-link works only in cases where the nav is hosted on <ul>. If the navigation is created with custom structure, the tabs/navs/pills need to be direct children to the .nav parent.
In your scenario you either have to reimplement it using <ul> or you need to remove the divs between your .nav and its inner .nav-link elements.
You also have a typo - the nav-lin should be nav-link. Actually, this does not affect your layout, because you have added .btn class to the same elements.
Here is your code with the fixed typo and removed wrapper divs inside the navigation elements:
<div class="container-fluid">
<div class="row">
<div class="col-md-12 mb-4">
<div class="">
<div class="nav nav-pills row">
<a class="nav-link active btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu1">Menu 1</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu2">Menu 2</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu3">Menu 3</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu4">Menu4 4</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu5">Menu 5</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu6">Menu 6</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu7">Menu 7</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu8">Menu 8</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu9">Menu 9</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu10">Menu 10</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu11">Menu 11</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu12">Menu 12</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
<div class="nav nav-pills">
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu13">Menu 13</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu14">Menu 14</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu15">Menu 15</a>
</div>
</div>
<div class="col-md-10">
<div class="card">
<div class="card-body">
<div class="tab-content">
<div class="tab-pane container active" id="menu1">1</div>
<div class="tab-pane container fade" id="menu2">2</div>
<div class="tab-pane container fade" id="menu3">3</div>
<div class="tab-pane container fade" id="menu4">4</div>
<div class="tab-pane container fade" id="menu5">5</div>
<div class="tab-pane container fade" id="menu6">6</div>
<div class="tab-pane container fade" id="menu7">7</div>
<div class="tab-pane container fade" id="menu8">8</div>
<div class="tab-pane container fade" id="menu9">9</div>
<div class="tab-pane container fade" id="menu10">10</div>
<div class="tab-pane container fade" id="menu11">11</div>
<div class="tab-pane container fade" id="menu12">12</div>
<div class="tab-pane container fade" id="menu13">13</div>
<div class="tab-pane container fade" id="menu14">14</div>
<div class="tab-pane container fade" id="menu15">15</div>
<div class="tab-pane container fade" id="menu16">16</div>
<div class="tab-pane container fade" id="menu17">17</div>
<div class="tab-pane container fade" id="menu18">18</div>
</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="nav nav-pills">
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu16">Menu 16</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu17">Menu 17</a>
<a class="nav-link btn btn-outline-secondary btn-lg" data-toggle="pill" href="#menu18">Menu18</a>
</div>
</div>
</div>
</div>
I have one big menu that I need to divide into cols for mobile and desktop.
So I put put around it:
<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 problem is that I need both of them to act as one menu. Selecting one item from either of these should only display one result and one active menu item. But because I separated the menus, they show two active items in the menu:
Is there a way to make them both act as one menu, even though they are separated by divs ?
Here is the JSFiddle: https://jsfiddle.net/prozik/qLu9pfje/12/
Here is the bootstrap documentation for the nav (vertical) I followed: https://getbootstrap.com/docs/4.0/components/navs/
Here is the code:
<!-- 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>
There is a jQuery hack to get the desired output,
Add
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");
});
})
And add id to nav-pills div. Check the snippet
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>