I have two Tabs, Tab-A and Tab-b, whenever user click on Tab-A it will show and activate Tab-B but again when user click on Tab-A, while Tab-b is active it has to show Tab-A and it' content
Currently when I click on Tab-A it will switch to Tab-B but again when I click on Tab-A it has to switch to Tab-A but it's not switching.
// TAB Buttons
const tab1 = document.querySelector('#tab11')
const tab2 = document.querySelector('#tab12')
// TAB Content
const allTabPane = document.querySelectorAll('.tab-pane')
tab1.addEventListener('click', showSecondTab)
function showSecondTab(e) {
e.preventDefault()
inactiveAllTabPane()
setTimeout(function() {
tab2.click()
}, 400)
}
function inactiveAllTabPane() {
for (let i = 0; i < allTabPane.length; i ) {
const element = allTabPane[i];
element.classList.remove('active')
}
}.pg-content p {
font-family: poppins;
font-size: 14px;
margin-bottom: 0px;
}
.acc-head {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
align-items: center;
}
.tab-accrd a {
text-decoration: none;
color: #000;
font-family: poppins;
}
.tab-accrd a i {
color: #FC453E;
}
.tab-accrd .card {
background: #eee;
border-bottom: 1px solid #FC453E;
border-radius: 0px;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
}
.tab-accrd .card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.tab-accrd .card-header:first-child {
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.tab-accrd h5 {
font-size: 20px;
}
.p-0 {
padding: 0px;
}
.nav-tabs {
border: none;
}
.ml-1,
.mx-1 {
margin-left: 0.25rem!important;
}
.accordion-head i {
float: right;
}
.accordion-head>.collapsed>i:before {
content: "\f151";
}
html {
scroll-behavior: smooth;
}
.tab-accrd span {
font-size: 30px;
font-weight: 600;
color: #fc453e;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div >
<div >
<div >
<ul >
<!-- define id for tabs tab11 and tab12 -->
<li ><a href="#tab3default" id="tab11" data-toggle="tab">Default 1</a></li>
<li><a href="#tab4default" id="tab12" data-toggle="tab">Default 2</a></li>
</ul>
</div>
<div >
<div >
<div id="tab3default">
<div id="faqAccordion">
<div >
<div style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question5">
<div style="align-items:center;">
<span>1</span>
<h5 >
What is Lorem Ipsum?
</h5>
</div>
</div>
<div id="question5" style="height: 0px;">
<div style="padding: 15px;
background: #eee;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
</p>
</div>
</div>
</div>
<div >
<div style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question6">
<div style="align-items:center;">
<span>2</span>
<h5 >
What is Lorem Ipsum?
</h5>
</div>
</div>
<div id="question6" style="height: 0px;">
<div style="padding: 15px;
background: #eee;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
</div>
</div>
</div>
<div id="tab4default">
<div id="faqAccordion">
<div >
<div style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question9">
<div style="align-items:center;">
<span>1</span>
<h5 >
What is Lorem Ipsum?
</h5>
</div>
</div>
<div id="question9" style="height: 0px;">
<div style="padding: 15px;
background: #eee;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
</p>
</div>
</div>
</div>
<div >
<div style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question1">
<div style="align-items:center;">
<span>2</span>
<h5 >
What is Lorem Ipsum?
</h5>
</div>
</div>
<div id="question1" style="height: 0px;">
<div style="padding: 15px;
background: #eee;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>CodePudding user response：
You can check whether a click is needed and if so, perform the click on the correct tab inside a setTimeout
// TAB Buttons
const tab1 = document.querySelector('#tab11')
const tab2 = document.querySelector('#tab12')
// TAB Content
const allTabPane = document.querySelectorAll('.tab-pane')
tab1.addEventListener('click', toggleTabs);
tab2.addEventListener('click', toggleTabs);
function clickTab(tab) {
if (tab.parentNode.classList.contains('active') === false) tab.click();
}
function toggleTabs(e) {
e.preventDefault();
if (this.parentNode.classList.contains('active')) {
let toClick = this.parentNode.parentNode.querySelector('li:not(.active) > a');
setTimeout(function() {
toClick.click();
}, 40);
}
}.pg-content p {
font-family: poppins;
font-size: 14px;
margin-bottom: 0px;
}
.acc-head {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
align-items: center;
}
.tab-accrd a {
text-decoration: none;
color: #000;
font-family: poppins;
}
.tab-accrd a i {
color: #FC453E;
}
.tab-accrd .card {
background: #eee;
border-bottom: 1px solid #FC453E;
border-radius: 0px;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
}
.tab-accrd .card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.tab-accrd .card-header:first-child {
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.tab-accrd h5 {
font-size: 20px;
}
.p-0 {
padding: 0px;
}
.nav-tabs {
border: none;
}
.ml-1,
.mx-1 {
margin-left: 0.25rem!important;
}
.accordion-head i {
float: right;
}
.accordion-head>.collapsed>i:before {
content: "\f151";
}
html {
scroll-behavior: smooth;
}
.tab-accrd span {
font-size: 30px;
font-weight: 600;
color: #fc453e;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div >
<div >
<div >
<ul >
<!-- define id for tabs tab11 and tab12 -->
<li ><a href="#tab3default" id="tab11" data-toggle="tab">Default 1</a></li>
<li><a href="#tab4default" id="tab12" data-toggle="tab">Default 2</a></li>
</ul>
</div>
<div >
<div >
<div id="tab3default">
<div id="faqAccordion">
<div >
<div style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question5">
<div style="align-items:center;">
<span onclick="clickTab(tab1)">1</span>
<h5 >
What is Lorem Ipsum?
</h5>
</div>
</div>
<div id="question5" style="height: 0px;">
<div style="padding: 15px;
background: #eee;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
</p>
</div>
</div>
</div>
<div >
<div style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question6">
<div style="align-items:center;">
<span onclick="clickTab(tab2)">2</span>
<h5 >
What is Lorem Ipsum?
</h5>
</div>
</div>
<div id="question6" style="height: 0px;">
<div style="padding: 15px;
background: #eee;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
</div>
</div>
</div>
<div id="tab4default">
<div id="faqAccordion">
<div >
<div style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question9">
<div style="align-items:center;">
<span onclick="clickTab(tab1)">1</span>
<h5 >
What is Lorem Ipsum?
</h5>
</div>
</div>
<div id="question9" style="height: 0px;">
<div style="padding: 15px;
background: #eee;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
</p>
</div>
</div>
</div>
<div >
<div style="padding: 20px;background: #eee;" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question1">
<div style="align-items:center;">
<span onclick="clickTab(tab2)">2</span>
<h5 >
What is Lorem Ipsum?
</h5>
</div>
</div>
<div id="question1" style="height: 0px;">
<div style="padding: 15px;
background: #eee;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>