I'm attempting to show & hide a div based on which Tab was selected.
For example, Tab 1 should show section 1. When clicking on Tab 2 this should show Section 2 and hide the previous Tab 1. The same functionality should work anytime you click on a tab. It should hide the one you are on and then show the one you clicked.
At the moment, When clicking on the Tab it's showing as expected but it's not hiding the previous section.
I believe the issue is coming from my function displaySection but I am having issues on narrowing down what exactly is causing the problem.
I've attempted to search for solutions on this and was only able to find jQuery examples, I'm attempting to resolve this using Javascript only.
Here is my code snippet:
function activeTab(evt, id) {
// Get all elements with and remove the class "active"
let tabactive = document.getElementsByClassName("TabButtonSelected");
tabactive[0].className = tabactive[0].className.replace(" TabButtonSelected", "");
document.getElementById(id).style.display = "block";
evt.currentTarget.className = " TabButtonSelected";
displaySection(evt,id)
}
function displaySection(evt, id) {
let tabactive = document.getElementsByClassName("tab-section");
tabactive[0].className = tabactive[0].className.replace(" d-chart-show", "d-chart-n");
document.getElementById("Section" id).style.display = "block";
evt.currentTarget.className = " d-chart-show";
}.container {
width: 50%
}
.d-flex{
display: flex;
width: 100%;
}
.d-flex-col{
display: flex;
width: 100%;
flex-direction: column;
}
.text-center {
text-align: center;
}
.TabButton {
width: 100%;
color: #5A5A61;
border: 0;
border-bottom: 1px solid #e0e0e0;
background-color: #FFFFFF;
margin: 0;
font-size: 14px;
line-height: 16px;
font-weight: normal;
padding: 16px;
cursor: pointer;
}
.TabButtonSelected {
color: #7A1315 !important;
border-bottom-color: #C94927 !important;
font-weight: 500;
}
.d-chart-n {
display: none;
}
.d-chart-show {
display: block;
}<div class="container">
<div class="d-flex">
<div class="d-flex text-center">
<div class="TabButton TabButtonSelected" id="Tab1" onclick="activeTab(event, 'Tab1')"> Tab 1</div>
<div class="TabButton "id="Tab2" onclick="activeTab(event, 'Tab2')">Tab 2</div>
<div class="TabButton " id="Tab3" onclick="activeTab(event, 'Tab3')">Tab 3</div>
<div class="TabButton " id="Tab4" onclick="activeTab(event, 'Tab4')">Tab 4</div>
</div>
</div>
<div class="d-flex-col">
<div id="SectionTab1" class="tab-section d-chart-n d-chart-show" > Tab 1 Section</div>
<br/>
<br/>
<div id="SectionTab2" class="tab-section d-chart-n"> Tab 2 Section</div>
<br/>
<br/>
<div id="SectionTab3" class="tab-section d-chart-n"> Tab 3 Section</div>
<br/>
<br/>
<div id="SectionTab4" class="tab-section d-chart-n"> Tab 4 Section</div>
<br/>
<br/>
</div>
</div>My desired result is when clicking away from the Tab it'll have the section beginning to the tab.
CodePudding user response：
One simple solution based on your current codes, adds one line of codes= [...document.querySelectorAll('div.tab-section')].forEach(item => item.style.display='none') inside displaySection to hide all sections ahead of showing target section.
function activeTab(evt, id) {
// Get all elements with and remove the class "active"
let tabactive = document.getElementsByClassName("TabButtonSelected");
tabactive[0].className = tabactive[0].className.replace(" TabButtonSelected", "");
document.getElementById(id).style.display = "block";
evt.currentTarget.className = " TabButtonSelected";
displaySection(evt,id)
}
function displaySection(evt, id) {
let tabactive = document.getElementsByClassName("tab-section");
tabactive[0].className = tabactive[0].className.replace(" d-chart-show", "d-chart-n");
// add below line of codes
[...document.querySelectorAll('div.tab-section')].forEach(item => item.style.display='none')
document.getElementById("Section" id).style.display = "block";
evt.currentTarget.className = " d-chart-show";
}.container {
width: 50%
}
.d-flex{
display: flex;
width: 100%;
}
.d-flex-col{
display: flex;
width: 100%;
flex-direction: column;
}
.text-center {
text-align: center;
}
.TabButton {
width: 100%;
color: #5A5A61;
border: 0;
border-bottom: 1px solid #e0e0e0;
background-color: #FFFFFF;
margin: 0;
font-size: 14px;
line-height: 16px;
font-weight: normal;
padding: 16px;
cursor: pointer;
}
.TabButtonSelected {
color: #7A1315 !important;
border-bottom-color: #C94927 !important;
font-weight: 500;
}
.d-chart-n {
display: none;
}
.d-chart-show {
display: block;
}<div class="container">
<div class="d-flex">
<div class="d-flex text-center">
<div class="TabButton TabButtonSelected" id="Tab1" onclick="activeTab(event, 'Tab1')"> Tab 1</div>
<div class="TabButton " id="Tab2" onclick="activeTab(event, 'Tab2')">Tab 2</div>
<div class="TabButton " id="Tab3" onclick="activeTab(event, 'Tab3')">Tab 3</div>
<div class="TabButton " id="Tab4" onclick="activeTab(event, 'Tab4')">Tab 4</div>
</div>
</div>
<div class="d-flex-col">
<div id="SectionTab1" class="tab-section d-chart-n d-chart-show" > Tab 1 Section</div>
<br/>
<br/>
<div id="SectionTab2" class="tab-section d-chart-n"> Tab 2 Section</div>
<br/>
<br/>
<div id="SectionTab3" class="tab-section d-chart-n"> Tab 3 Section</div>
<br/>
<br/>
<div id="SectionTab4" class="tab-section d-chart-n"> Tab 4 Section</div>
<br/>
<br/>
</div>
</div>CodePudding user response：
IMHO, the easiest way, the HTML & JS shortest code, too...
const dContainer = document.querySelector('#TabsSystem')
dContainer
.querySelectorAll('.TabButton')
.forEach( tab =>
tab.onclick =_=>
{
dContainer.dataset.tab = tab.dataset.tab
}
).container {
width : 50%
}
.d-flex {
display : flex;
width : 100%;
}
.d-flex-col {
display : flex;
width : 100%;
flex-direction : column;
}
.text-center {
text-align : center;
}
#TabsSystem .TabButton {
width : 100%;
color : #5A5A61;
border : 0;
border-bottom : 1px solid #e0e0e0;
background-color : #FFFFFF;
margin : 0;
font-size : 14px;
line-height : 16px;
font-weight : normal;
padding : 16px;
cursor : pointer;
}
#TabsSystem[data-tab="Tab1"] .TabButton[data-tab="Tab1"],
#TabsSystem[data-tab="Tab2"] .TabButton[data-tab="Tab2"],
#TabsSystem[data-tab="Tab3"] .TabButton[data-tab="Tab3"],
#TabsSystem[data-tab="Tab4"] .TabButton[data-tab="Tab4"] {
color : #7A1315;
border-bottom-color : #C94927;
font-weight : 500;
}
#TabsSystem .tab-section {
display : none;
}
#TabsSystem[data-tab="Tab1"] .tab-section[data-tab="Tab1"],
#TabsSystem[data-tab="Tab2"] .tab-section[data-tab="Tab2"],
#TabsSystem[data-tab="Tab3"] .tab-section[data-tab="Tab3"],
#TabsSystem[data-tab="Tab4"] .tab-section[data-tab="Tab4"] {
display : block;
}<div class="container" id="TabsSystem" data-tab="Tab1">
<div class="d-flex">
<div class="d-flex text-center">
<div class="TabButton" data-tab="Tab1"> Tab 1</div>
<div class="TabButton" data-tab="Tab2"> Tab 2</div>
<div class="TabButton" data-tab="Tab3"> Tab 3</div>
<div class="TabButton" data-tab="Tab4"> Tab 4</div>
</div>
</div>
<div class="d-flex-col">
<div class="tab-section" data-tab="Tab1"> Tab 1 Section</div>
<div class="tab-section" data-tab="Tab2"> Tab 2 Section</div>
<div class="tab-section" data-tab="Tab3"> Tab 3 Section</div>
<div class="tab-section" data-tab="Tab4"> Tab 4 Section</div>
</div>
</div>