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.
Related
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 writing a javascript code to automate simple actions on my organization's admin console page (code is going to work in the dev tools console so I can only use pure javascript).
Actions are simple, I click on "details" (number 1 on image) and then click on "statistics" (number 3 on image).
The problem is that sectors 2 and 3 (see the image please) do not exist before I click sector 1.
After I click sector 1 with the javascript click() command sectors 2,3 are created but I can not find them with javascript.
I tried getting them with id and with class, but none of them works.
I have tried searching for answers but I only get answers for the situation where people can find dynamically created elements but can not use functions on it, my case is different, I can not find them at all.
This are the elements that are dynamically created:
<tr id="__BVID__54__details_0_" role="row" class="b-table-details">
<td colspan="16" role="cell">
<div class="tabs promotions-menu-tabs row" id="__BVID__350">
<!---->
<div class="col-auto">
<ul role="tablist" class="nav nav-pills flex-column" id="__BVID__350__BV_tab_controls_">
<li role="presentation" class="nav-item"><a role="tab" aria-selected="true" aria-setsize="7" aria-posinset="1" target="_self" href="#" class="nav-link active" id="__BVID__351___BV_tab_button__">Properties</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="7" aria-posinset="2" target="_self" href="#" class="nav-link" id="__BVID__354___BV_tab_button__">Prizes</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="7" aria-posinset="3" target="_self" href="#" class="nav-link" id="__BVID__356___BV_tab_button__">Stats</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="7" aria-posinset="4" target="_self" href="#" class="nav-link" id="__BVID__358___BV_tab_button__">Balance</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="7" aria-posinset="5" target="_self" href="#" class="nav-link" id="__BVID__360___BV_tab_button__">Balance journal</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="7" aria-posinset="6" target="_self" href="#" class="nav-link" id="__BVID__362___BV_tab_button__">Journal</a></li>
<li role="presentation" class="nav-item"><a role="tab" tabindex="-1" aria-selected="false" aria-setsize="7" aria-posinset="7" target="_self" href="#" class="nav-link" id="__BVID__364___BV_tab_button__">Statistics</a></li>
</ul>
</div>
<div class="tab-content col" id="__BVID__350__BV_tab_container_">
<div role="tabpanel" aria-hidden="false" class="tab-pane active" tabindex="-1" id="__BVID__351" aria-labelledby="__BVID__351___BV_tab_button__" style="">
<div data-v-75a75998="" class="promotions-properties">
<div data-v-75a75998="">
<div class="prompt_content mb-4 break-all">
<!---->
<div class="mb-4">
<h4>Leaderboard properties</h4>
<div class="mb-1"><b>Places in list:</b> range to 1000000
</div>
<div class="mb-1"><b>Points limits:</b> values 1
</div>
<div class="mb-1"><b>Amount factor:</b> values >0:20
</div>
</div>
<div class="mb-4">
<h4>Customer filters</h4>
<div class="mb-1"><b>Segment:</b> test promotions segment
</div>
<div class="mb-1"><b>Customer verification status:</b> ACCEPTED
</div>
</div>
</div>
<!---->
</div>
</div>
</div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__354" aria-labelledby="__BVID__354___BV_tab_button__" style="display: none;"></div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__356" aria-labelledby="__BVID__356___BV_tab_button__" style="display: none;"></div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__358" aria-labelledby="__BVID__358___BV_tab_button__" style="display: none;"></div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__360" aria-labelledby="__BVID__360___BV_tab_button__" style="display: none;"></div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__362" aria-labelledby="__BVID__362___BV_tab_button__" style="display: none;"></div>
<div role="tabpanel" aria-hidden="true" class="tab-pane" id="__BVID__364" aria-labelledby="__BVID__364___BV_tab_button__" style="display: none;"></div>
<!---->
</div>
</div>
</td>
</tr>
Any help is appreciated.
This is my javascript code:
let promoIdsToCheck = [230];
let promoTable = document.getElementsByClassName("table b-table table-sm border b-table-stacked-md")[0];
let promoTableBody = promoTable.tBodies[0];
let promoTableBodyRows = promoTableBody.rows;
console.log(promoTableBodyRows.length)
for(let i = 1; i < promoTableBodyRows.length; i++){
if(promoIdsToCheck.includes(parseInt(promoTableBodyRows[i].firstChild.textContent))){
let detailsDiv = promoTableBodyRows[i].lastChild;
let detailsButton = detailsDiv.children[0].children[0].children[0];
detailsButton.click();
let smt = document.getElementsByClassName("col-auto")[0]; // this is undefined
console.log(smt);
}
}
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'm trying to use bootstrap's card/tab feature to create a tabulated card that has 3 tabs, each corresponding to it's own active 'card body'
My current code:
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="page-header">
<h2>Social Media</h2>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="card-body">
<div id="insta">Instagram</div>
<div id="face">Facebook</div>
<div id="twit">Twitter</div>
</div>
</div>
<!-- END WIDGET 2 -->
</div>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
Creates the card correctly, and it indeed shows the appropriate tab headers with their respective links.
What I'm trying to do is make it so that if the Instagram tab is active, it shows the text 'Instagram'. Same for the other 2. Currently they are just inactive tabs and the main tab's body shows all three lines of text.
The javascript looks right but it's just not tabulating properly
Here's the codepen:
https://codepen.io/anon/pen/gKLJrm
You need to the use the appropriate markup for tabs with tab-content and tab-pane to make the tabs work: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
(no jquery is needed)
https://www.codeply.com/go/p5Zm4JA5jb
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="tab-content card-body">
<div id="insta" class="tab-pane active">Instagram</div>
<div id="face" class="tab-pane">Facebook</div>
<div id="twit" class="tab-pane">Twitter</div>
</div>
</div>
Notice both the nav-link and tab-pane have the active item set.
I hope this solves your problem
$(document).ready(function() {
$('.nav-item a').on('click', function(e){
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tab-content ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
li.nav-item.active a {
background: #fff;
border: 1px solid #eee;
border-bottom: none
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="page-header">
<h2>Social Media</h2>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="myTabs">
<li class="nav-item active">
<a class="nav-link" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div id="insta" class="tab-pane active">Instagram</div>
<div id="face" class="tab-pane">Facebook</div>
<div id="twit" class="tab-pane">Twitter</div>
</div>
</div>
<!-- END WIDGET 2 -->
</div>
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