I have some nested tabs, vertical and horizontal but they don't switch the active states or it gets buggy
body
{
min-height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div class="container-fluid row c2" id="my_jiku_box">
<div class="col-12 row" id="args">
<div class="col-4 nav flex-column nav-pills c1" id="vertMenu" role="tablist">
<a class="nav-link active" href="#v-pills-0" data-toggle="pill" role="tab"
aria-controls="#v-pills-0" aria-expanded="true">1980 Markina attack<span class=
"spaceTimeInfo">Spain, 20 September 1980</span></a><a class="nav-link" href=
"#v-pills-1" data-toggle="pill" role="tab" aria-controls="#v-pills-1"
aria-expanded="false">Cafetería Rolando bombing<span class=
"spaceTimeInfo">Spain, 13 September 1974</span></a>
</div>
<div class="col-8" id="horMenu">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active show" aria-labelledby="v-pills-0" id=
"v-pills-0">
<ul class="nav nav-pills nav-justified" role="tablist" id="pills-tab0">
<li class="nav-item"><a class="nav-link active" href="#pills-0"
data-toggle="pill" role="tab" aria-controls="pills-0" aria-expanded=
"true">Text</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-images0" data-toggle=
"pill" role="tab" aria-controls="pills-0" aria-expanded=
"true">Images</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-videos0" data-toggle=
"pill" role="tab" aria-controls="pills-0">Videos</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active show" id="pills-0">
<div class="toolbar">
<a data-command="bold" href="#"></a><a data-command="italic" href=
"#"></a><a data-command="underline" href="#"></a><a data-command=
"strikeThrough" href="#"></a>
</div>
<div class="dropEL col">
<div class="drag-header">
Drag and resize me!
</div>
<p class="content_jiku" contenteditable="true">The 1980 Markina attack
was a gun attack by the Basque separatist organisation ETA which
occurred on 20 September 1980 near the Basque town of Markina (Spanish:
). The targets were a group of off-duty civil guards who were having
lunch in a bar in the town. Four civil guards were killed. The attack
was one of the deadliest of 1980, the year when ETA killed more people
than any other.</p>
</div>
</div>
<div class="tab-pane fade dropEL col" id="pills-images0">
<div class="drag-header"></div><img class="img-fluid" src=
"https://lh6.googleusercontent.com/proxy/z9R-exzTZRIbnzTVezVAK9u4GLKmJxavscBKYnJnZqb25oDK2aF0pbC3K1BppdKBabOaxUMTB6L8_A1bTxp_0V_zqwmV2z4_MBJH0_67azUnVp02JeQThcFNVfOj8K_hN4OYKAdXPjGWjgfE8jY=-rj-w300-h300-l95-c0x039be5" /></div>
<div class="tab-pane fade dropEL col" id="pills-videos0">
<div class="drag-header"></div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src=
"https://www.youtube.com/embed/vQMSwhfnwZI?rel=0&modestbranding=1"></iframe>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" aria-labelledby="v-pills-1" id="v-pills-1">
<ul class="nav nav-pills nav-justified" role="tablist" id="pills-tab1">
<li class="nav-item"><a class="nav-link" href="#pills-1" data-toggle="pill"
role="tab" aria-controls="pills-1" aria-expanded="false">Text</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-images1" data-toggle=
"pill" role="tab" aria-controls="pills-1" aria-expanded=
"false">Images</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-videos1" data-toggle=
"pill" role="tab" aria-controls="pills-1">Videos</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="pills-1">
<div class="toolbar">
<a data-command="bold" href="#"></a><a data-command="italic" href=
"#"></a><a data-command="underline" href="#"></a><a data-command=
"strikeThrough" href="#"></a>
</div>
<div class="dropEL col">
<div class="drag-header">
Drag and resize me!
</div>
<p class="content_jiku" contenteditable="true">The Cafetería
Rolando bombing was an attack on 13 September 1974 at the Rolando cafe
in Calle del Correo, Madrid, Spain which killed 13 people and wounded
71. Though no claim of responsibility was made, the attack is widely
believed to have been carried out by the armed Basque separatist group
ETA.</p>
</div>
</div>
<div class="tab-pane fade dropEL col" id="pills-images1">
<div class="drag-header"></div><img class="img-fluid" src=
"https://i2.wp.com/upload.wikimedia.org/wikipedia/commons/thumb/6/67/Real_Casa_de_Correos_%28Madrid%29_05b.jpg/1280px-Real_Casa_de_Correos_%28Madrid%29_05b.jpg" /></div>
<div class="tab-pane fade dropEL col" id="pills-videos1">
<div class="drag-header"></div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src=
"https://www.youtube.com/embed/VVOCg3kInUk?rel=0&modestbranding=1"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 row col"></div>
jsFiddle here, I am basically trying to mix a bootstrap vertical tab menu which switches a horizontal tab system
Add a dummy class mainTab to tabs on the left side to identify vertical tabs from horizontal tabs. Add this code to your click function after declaration of panel variable. I have pasted the code which is working for me inside an external html file, and also the fiddle if i make the viewport size bigger. Only thing is that there are some console errors which are un-related to this issue. "Failed to construct 'PresentationRequest': The document is sandboxed and lacks the 'allow-presentation' flag".
Another thing that you may have to set is default horizontal tag active on load.
Your nested tabs were not removing active color because of nav-pills class on outer div.
<div class="container-fluid row c2" id="my_jiku_box">
<div class="col-6 row" id="args">
<div class="col-4 nav flex-column nav-pills c1" id="vertMenu" role="tablist">
<a class="nav-link active mainTab" href="#v-pills-0" data-toggle="pill" role="tab"
aria-controls="#v-pills-0" aria-expanded="true">1980 Markina attack<span class=
"spaceTimeInfo">Spain, 20 September 1980</span></a><a class="nav-link mainTab" href=
"#v-pills-1" data-toggle="pill" role="tab" aria-controls="#v-pills-1"
aria-expanded="false">Cafetería Rolando bombing<span class=
"spaceTimeInfo">Spain, 13 September 1974</span></a>
</div>
<div class="col-8" id="horMenu">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active show hMain" aria-labelledby="v-pills-0" id=
"v-pills-0">
<ul class="nav nav-justified" role="tablist" id="pills-tab0">
<li class="nav-item"><a class="nav-link active" href="#pills-0"
data-toggle="pill" role="tab" aria-controls="pills-0" aria-expanded=
"true">Text</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-images0" data-toggle=
"pill" role="tab" aria-controls="pills-0" aria-expanded=
"true">Images</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-videos0" data-toggle=
"pill" role="tab" aria-controls="pills-0">Videos</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active show" id="pills-0">
<div class="toolbar">
<a data-command="bold" href="#"></a><a data-command="italic" href=
"#"></a><a data-command="underline" href="#"></a><a data-command=
"strikeThrough" href="#"></a>
</div>
<div class="dropEL col">
<div class="drag-header">
Drag and resize me!
</div>
<p class="content_jiku" contenteditable="true">The 1980 Markina attack
was a gun attack by the Basque separatist organisation ETA which
occurred on 20 September 1980 near the Basque town of Markina (Spanish:
). The targets were a group of off-duty civil guards who were having
lunch in a bar in the town. Four civil guards were killed. The attack
was one of the deadliest of 1980, the year when ETA killed more people
than any other.</p>
</div>
</div>
<div class="tab-pane fade dropEL col" id="pills-images0">
<div class="drag-header"></div><img class="img-fluid" src=
"https://lh6.googleusercontent.com/proxy/z9R-exzTZRIbnzTVezVAK9u4GLKmJxavscBKYnJnZqb25oDK2aF0pbC3K1BppdKBabOaxUMTB6L8_A1bTxp_0V_zqwmV2z4_MBJH0_67azUnVp02JeQThcFNVfOj8K_hN4OYKAdXPjGWjgfE8jY=-rj-w300-h300-l95-c0x039be5" /></div>
<div class="tab-pane fade dropEL col" id="pills-videos0">
<div class="drag-header"></div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src=
"https://www.youtube.com/embed/vQMSwhfnwZI?rel=0&modestbranding=1"></iframe>
</div>
</div>
</div>
</div>
<div class="tab-pane fade hMain" aria-labelledby="v-pills-1" id="v-pills-1">
<ul class="nav nav-justified" role="tablist" id="pills-tab1">
<li class="nav-item"><a class="nav-link" href="#pills-1" data-toggle="pill"
role="tab" aria-controls="pills-1" aria-expanded="false">Text</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-images1" data-toggle=
"pill" role="tab" aria-controls="pills-1" aria-expanded=
"false">Images</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-videos1" data-toggle=
"pill" role="tab" aria-controls="pills-1">Videos</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="pills-1">
<div class="toolbar">
<a data-command="bold" href="#"></a><a data-command="italic" href=
"#"></a><a data-command="underline" href="#"></a><a data-command=
"strikeThrough" href="#"></a>
</div>
<div class="dropEL col">
<div class="drag-header">
Drag and resize me!
</div>
<p class="content_jiku" contenteditable="true">The Cafetería
Rolando bombing was an attack on 13 September 1974 at the Rolando cafe
in Calle del Correo, Madrid, Spain which killed 13 people and wounded
71. Though no claim of responsibility was made, the attack is widely
believed to have been carried out by the armed Basque separatist group
ETA.</p>
</div>
</div>
<div class="tab-pane fade dropEL col" id="pills-images1">
<div class="drag-header"></div><img class="img-fluid" src=
"https://i2.wp.com/upload.wikimedia.org/wikipedia/commons/thumb/6/67/Real_Casa_de_Correos_%28Madrid%29_05b.jpg/1280px-Real_Casa_de_Correos_%28Madrid%29_05b.jpg" /></div>
<div class="tab-pane fade dropEL col" id="pills-videos1">
<div class="drag-header"></div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src=
"https://www.youtube.com/embed/VVOCg3kInUk?rel=0&modestbranding=1"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 row col"></div>
<script type="text/javascript">
$(document).ready(function(){
$(".nav-link").removeClass("active");
var elem = $(".mainTab")[0];
$(elem).addClass("active");
var href=$(elem).attr("href")
console.log(href);
$("div"+href).show();
console.log($("div"+href).find(".nav-link")[0]);
$($("div"+href).find(".nav-link")[0]).addClass("nav-pills");
});
$(".nav-link").click(function(){
var me = $(this);
var panel = $('#' + this.hash.substr(1).toLowerCase());
if(me.hasClass("mainTab"))
{
$(".nav-link.active").removeClass("active");
var href=me.attr("href");
$("div.hMain").hide();
$("div.hMain").removeClass("active");
$("div"+href).show();
}
me.parent().addClass('nav-pills');
if(me.hasClass('active')){
$(".nav-link.active").removeClass("active");
me.removeClass('active');
panel.removeClass('active');
return false;
}
});
</script>
Based on the html in the question, I re-created the logic by adding and removing the class active based on the id if this matches the href of the clicked element
$(".col-4 .nav-link").on("click", function(){
var curId = $(this).attr("href");
$(".tab-pane").removeClass("active show");
$(".nav-justified .nav-link").removeClass("active");
$(".tab-pane" + curId).addClass("active show");
});
jsFiddle here
Related
I need to get the id of the active tab-pane every time that I change from tab to tab in my page and, depending on which tab-pane it is(tab-pane1,tab-pane2,tab-pane3), store(tab-pane1 = 1 and so on) in a variable and display it in the console.
Using vanilla JS or jQuery, both are fine.
my code looks like this
<ul class="nav nav-tabs nav-success" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-icon">
</div>
<div class="tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content py-3">
<div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
<!-- content tab-pane1 -->
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel">
<!-- content tab-pane2 -->
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel">
<!-- content tab-pane3 -->
</div>
My jQuery looks like this.
console.log($(".tab-pane.active").attr("id"));
You can use class shown.bs.tab to get active tab number. Get active tab href attribute and slice to get desire result.
Example:
console.log($("a.active").attr("href").slice(-1)); // Get value when page load if needed
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
var result = $(e.target).attr("href").slice(-1); // get activ tab number
console.log(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs nav-success" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-icon">
</div>
<div class="tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content py-3">
<div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
<!-- content tab-pane1 -->
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel">
<!-- content tab-pane2 -->
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel">
<!-- content tab-pane3 -->
</div>
Note: there is not attribute id on anchor tag so why I catch href attribute and slice.
I add an input form in bootstrap 5 tabs like this:
<div class="container">
<div class="row justify-content-center my-5">
<div class="col-auto">
<ul class="nav bg-dark">
<li class="nav-item">
<a class="nav-link link-secondary" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link link-secondary" id="about-tab" data-bs-toggle="tab" data-bs-target="#about" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link link-secondary active" id="album-tab" data-bs-toggle="tab" data-bs-target="#album" href="#">ALBUM</a>
</li>
</ul>
<div class="tab-content" id="tabContent">
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<img class="img-fluid" src="https://fakeimg.pl/800x300/?text=home" />
</div>
<div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
<img class="img-fluid" src="https://fakeimg.pl/800x300/?text=about" />
</div>
<div class="tab-pane fade show active" id="album" role="tabpanel" aria-labelledby="album-tab">
<input id="searchDateFrom" type="text" class="form-control search-by-date" data-name="searchDateFrom">
<img class="img-fluid" src="https://fakeimg.pl/800x300/?text=album" />
</div>
</div>
</div>
</div>
</div>
Js:
var dateFrom = $('#searchDateFrom').val();
$('#searchDateFrom').change(function() {
console.log(dateFrom);
});
Now, In action, I need to get input value using jQuery change method. But, after change the value I can't see any result. (into console log in case)
How do can I fix this problem?!
DEMO Here
Image:
The problem is, that you don't refresh the value of your variable "dateFrom" on change.
dateFrom keeps its initial value, which is "". On change, it logs this value.
You should change your code to:
var dateFrom;
$('#searchDateFrom').change(function() {
dateFrom = $('#searchDateFrom').val();
console.log(dateFrom);
});
This will update the value of the variable on change and log it afterwards.
I am using Vue with bootstrap for my project:
<template>
<section>
<div v-if="isLoading">
<base-spinner></base-spinner>
</div>
<div v-else>
<div class="nav flex-column nav-pills" id="v-pills-tab" 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 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>
</section>
</template>
The output of the code above is as below:
The tab-content is showing below the navigation bar. How can I fix it so that the tab-content shows on the right side of the navigation bar?
Okay fixed it. Firstly, would need to wrap them in container class and create two divs with col-sm class.
Secondly, place all the <a> tags with nav-link class into the first col-sm div.
Thirdly, place all the tab contents into the second col-sm div.
Sample code as below. Thanks!
<template>
<section>
<div v-if="isLoading">
<base-spinner></base-spinner>
</div>
<div v-else style="background-color:pink;">
<div class="container">
<div class="row">
<div class="col-sm">
<div
class="nav flex-column nav-pills"
id="v-pills-tab"
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>
<div class="col-sm">
<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>
</div>
</div>
</section>
</template>
I have a problem with nav-tab and tab-pane.
I have successfully implemented nav-tab but tab pane is not working correctly.
when I click on a second nav-tab then the respective content does not appear. Well, I am new to bootstrap learning good ways to style the content. Please answer I am stuck there and not finding any solution.
Here is the code:
<div class="row row-content">
<div class="col-12">
<h2>Corporate Leadership</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#peter" role="tab" data-toggle="tab">Peter Pan, CEO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#danny" role="tab" data-toggle="tab">Dhanasekaran Witherspoon, CFO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#agumbe" role="tab" data-toggle="tab">Agumbe Tang, CTO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#alberto" role="tab" data-toggle="tab">Alberto Somayya, EC</a>
</li>
</ul>
//from here my tab pane content started
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="peter">
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the pioneering cross-cultural culinary connections.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="danny">
<h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
<p class="d-none d-sm-block">Our CFO, Danny, as he is
<em>Everything that runs, wins, and everything that stays, pays!
</em></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="agumbe">
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p class="d-none d-sm-block">Blessed with the most discerning gustatory.
<em>You click only if you survive my lick.</em></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="alberto">
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with you get a winning hit! Amma Mia!</em>
</p>
</div>
</div>
</div>
</div>
You should include Bootstrap JS and Jquery to make it work. See demo below
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row row-content">
<div class="col-12">
<h2>Corporate Leadership</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#peter" role="tab" data-toggle="tab">Peter Pan, CEO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#danny" role="tab" data-toggle="tab">Dhanasekaran Witherspoon, CFO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#agumbe" role="tab" data-toggle="tab">Agumbe Tang, CTO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#alberto" role="tab" data-toggle="tab">Alberto Somayya, EC</a>
</li>
</ul>
//from here my tab pane content started
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="peter">
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the pioneering cross-cultural culinary connections.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="danny">
<h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
<p class="d-none d-sm-block">Our CFO, Danny, as he is
<em>Everything that runs, wins, and everything that stays, pays!
</em></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="agumbe">
<h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
<p class="d-none d-sm-block">Blessed with the most discerning gustatory.
<em>You click only if you survive my lick.</em></p>
</div>
<div role="tabpanel" class="tab-pane fade" id="alberto">
<h3>Alberto Somayya <small>Executive Chef</small></h3>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with you get a winning hit! Amma Mia!</em>
</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
I have a list of meals eaten during the day, categorized by meal: breakfast, lunch and dinner, each with its respective courses. The tab contents show the quantities.
Link on jsFiddle: https://jsfiddle.net/3ma0yt7k/2/ (code gets too long to paste the bulk of it in)
<div class="container">
<div class="tabbable boxed parentTabs">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#meal1">Breakfast</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#lunch">Lunch</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dinner">dinner</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#all">See All Meals</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade show in" id="meal1">
<div class="tabbable">
<ul class="nav nav-pills active nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#yoghurt">yoghurt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cornflakes">corn flakes</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane show fade active in" id="yoghurt">
<div class="form-group row">
<p>3 cups of yoghurt</p>
</div>
</div>
<div class="tab-pane fade" id="cornflakes">
<div class="form-group row">
<p>4 bowls of cornflakes</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="lunch">
<div class="tabbable">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#fries">Fries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#falafel">Falafel</a>
</li>
</ul>
<div class="tab-content table-top">
<!--pane detail-->
<div class="tab-pane show fade active in" id="fries">
<p>4 plates of fries</p>
</div>
<div class="tab-pane fade in" id="falafel">
<p>4 bowls of falafel</p>
</div>
</div>
</div>
</div>
<!--dinner-->
<div class="tab-pane fade in" id="dinner">
<div class="tabbable">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#pasta">Pasta</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pizza">Pizza</a>
</li>
</ul>
<div class="tab-content table-top">
<div class="tab-pane show fade active in" id="pasta">
<div class="form-group row">
<p>3 plates of pasta</p>
</div>
</div>
<div class="tab-pane fade" id="pizza">
<div class="form-group row">
<p>3 slices of pizza</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="all">
<p>gather them all</p>
</div>
</div>
</div>
</div>
I want to click "See all meals" and get a list with all the .tab-pane elements for each of the meals of the day. Basically clicking "see all" should show the panes with the text concerning yoghurt, corn flakes, fries, falafel, pasta and pizza (without the 'children' panes).
I can only gather them up if they are in a single category, or parent-child relationship (like Breakfast where each .tab-pane gets a class of 'active' but that doesn't work for the other ones (unless clicked)?
Apparently the only way to achieve this is to add an extra class to the top-most row of the tabs. this class will then be toggled to display "none" and the elements inside will all have an additional class of "active show".
<div class="tab-pane active **toggle-showing-of-this-class** fade show in" id="meal1">
If anyone has another more elegant solution in the meanwhile it would be nice.