Current Issues:
1-By Default the First Main Tab with data-tab="1" and First Sub Tab with the data-tab="1" and the Inputs related to First Sub Tab with the data-tab="1" are active thats good to go. But when click on other sub-tab with data-tab="1" it does not remove the active-sub-tab class from all the tabs and add to clicked one. Which keeps adding the active-sub-tab on all the tabs thats the huge issue. 2- If I click on other main tabs it by default shows the first sub tab as active but does not show its respective inputs
My part of HTML structure
<div id="main-tabs">
<button class="tab active" onclick="showTab('book')" data-tab="1">
Book
</button>
<button class="tab" onclick="showTab('book-section')" data-tab="2">
Book Section
</button>
<button class="tab" onclick="showTab('journal')" data-tab="3">
Journal
</button>
<button class="tab" onclick="showTab('periodical')" data-tab="4">
Periodical
</button>
<button class="tab" onclick="showTab('website')" data-tab="5">
Website
</button>
</div>
<div id="book" class="sub-tabs">
<div class="sub-tabs-wrapper">
<button class="sub-tab" onclick="showCitationStyle('apa-book')" data-tab="1"><span>APA</span><span>(Sixth Edition)</span></button>
<button class="sub-tab" onclick="showCitationStyle('chicago-book')" data-tab="1"><span>Chicago</span><span>(Sixteenth Edition)</span></button>
<button class="sub-tab" onclick="showCitationStyle('harvard-book')" data-tab="1"><span>Harvard</span><span>Anglia (2008)</span></button>
<button class="sub-tab" onclick="showCitationStyle('ieee-book')" data-tab="1"><span>IEEE</span><span>(2006)</span></button>
<button class="sub-tab" onclick="showCitationStyle('mla-book')" data-tab="1"><span>MLA</span><span>(Seventh Edition)</span></button>
<button class="sub-tab" onclick="showCitationStyle('turabian-book')" data-tab="1"><span>Turabian</span><span>(Sixth Edition)</span></button>
</div>
</div>
<div id="book-section" class="sub-tabs">
<div class="sub-tabs-wrapper">
<!-- 6 buttons with class sub-tab, same onclickCitationStyle() by replacing book with bookSection data-tab="2" -->
</div>
</div>
<div id="journal" class="sub-tabs">
<div class="sub-tabs-wrapper">
<!-- 6 buttons with class sub-tab, same onclickCitationStyle() by replacing book with journal data-tab="3" -->
</div>
</div>
<div id="periodical" class="sub-tabs">
<div class="sub-tabs-wrapper">
<!-- 6 buttons with class sub-tab, same onclickCitationStyle() by replacing book with periodical data-tab="4" -->
</div>
</div>
<div id="website" class="sub-tabs">
<!-- 6 buttons with class sub-tab, same onclickCitationStyle() by replacing book with website data-tab="5" -->
</div>
<!-- Inputs for Book Main tab -> sub-tabs -->
<div class="book-input-wrapper">
<div id="apa-book" class="citation-style">
<div class="cite-wrapper">
<div class="input-wrapper">
<!-- all the inputs for Book main tab sub-tab APA its generate button and output div -->
</div>
</div>
</div>
<div id="chicago-book" class="citation-style">
<div class="cite-wrapper">
<div class="input-wrapper">
<!-- all the inputs for Book main tab sub-tab chicago its generate button and output div -->
</div>
</div>
</div>
<div id="harvard-book" class="citation-style">
<div class="cite-wrapper">
<div class="input-wrapper">
<!-- all the inputs for Book main tab sub-tab harvard its generate button and output div -->
</div>
</div>
</div>
<div id="ieee-book" class="citation-style">
<div class="cite-wrapper">
<div class="input-wrapper">
<!-- all the inputs for Book main tab sub-tab ieee its generate button and output div -->
</div>
</div>
</div>
<div id="mla-book" class="citation-style">
<div class="cite-wrapper">
<div class="input-wrapper">
<!-- all the inputs for Book main tab sub-tab mla its generate button and output div -->
</div>
</div>
</div>
<div id="turabian-book" class="citation-style">
<div class="cite-wrapper">
<div class="input-wrapper">
<!-- all the inputs for Book main tab sub-tab turabian its generate button and output div -->
</div>
</div>
</div>
</div>
<!-- Inputs for Book Section Main tab -> sub-tabs -->
<div class="bookSection-input-wrapper">
<!-- follow same structure as Inputs for Book Main tab -> sub-tabs just changed the ids by replacing -book from id to -bookSection -->
</div>
<!-- Inputs for Journal Main tab -> sub-tabs -->
<div class="journal-input-wrapper">
<!-- follow same structure as Inputs for Book Main tab -> sub-tabs just changed the ids by replacing -book from id to -jouranl -->
</div>
<!-- Inputs for Journal Main tab -> sub-tabs -->
<div class="periodical-input-wrapper">
<!-- follow same structure as Inputs for Book Main tab -> sub-tabs just changed the ids by replacing -book from id to -periodical -->
</div>
<!-- Inputs for Website Main tab -> sub-tabs -->
<div class="website-input-wrapper">
<!-- follow same structure as Inputs for Book Main tab -> sub-tabs just changed the ids by replacing -book from id to -website -->
</div>
My part of JavaScript that have issues:
//Function to show the sub-tabs for a given main tab
function showTab(tabId) {
// Hide all sub-tabs
var subTabs = document.getElementsByClassName("sub-tabs");
for (var i = 0; i < subTabs.length; i++) {
subTabs[i].style.display = "none";
}
// Show the sub-tabs for the selected main tab
document.getElementById(tabId).style.display = "block";
}
// Function to show the citation style inputs for a given citation style
function showCitationStyle(citationStyle) {
// Hide all citation style inputs
var citationStyles = document.getElementsByClassName("citation-style");
for (var i = 0; i < citationStyles.length; i++) {
citationStyles[i].style.display = "none";
}
// Show the citation style inputs for the selected citation style
document.getElementById(citationStyle).style.display = "block";
}
// Get all the main tabs
var tabs = document.querySelectorAll('.tab');
// Add the active class to the first tab
tabs[0].classList.add('active-tab');
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", function() {
// Remove the active class from all tabs
for (var j = 0; j < tabs.length; j++) {
tabs[j].classList.remove("active-tab");
}
// Add the active class to the clicked tab
this.classList.add("active-tab");
});
}
// Get all the sub-tabs
var subTabs = document.querySelectorAll('.sub-tab');
// Add the active class to the first sub-tab
subTabs[0].classList.add('active-sub-tab');
for (var i = 0; i < subTabs.length; i++) {
subTabs[i].addEventListener("click", function() {
// Remove the active class from all sub-tabs
for (var j = 0; j < subTabs.length; j++) {
subTabs[j].classList.remove("active-sub-tab");
}
// Add the active class to the clicked sub-tab
this.classList.add("active-sub-tab");
});
}
Desired Output:
I want smooth tab functionality for Main Tab their sub tabs and respective inputs: in tabs and sub tabs I used data-tab for 5 main tabs. For each main tab there are 6 sub tabs defining which sub tabs are for which main tab by mentioning the same data-tab attribute in sub tabs 1- On Page Load - First Main Tab with data-tab="1" and its First sub-tab with data-tab="1" and its respective input should be active. 2- On click on other sub-tabs with data-tab="1" it should first remove the active-sub-tab class from all the sub-tab with data-tab="1" and add active-sub-tab class to clicked sub-tab with data-tab="1" and on every click on any sub-tab with data-tab="1" should display its respective inputs. 3- On Click on other main tab it should follow the same functionality with their respective data-tab attributes, sub-tab and respective inputs.
