Javascript Tabs Accordion Issue

Question

I have created a tabs accordion which is working properly. However their behaviour is not as i want it to be. At the current tabs accordion when i press one of the tabs it will show the content inside it, and when i press another tab it will open also. What i would like to have happen is when i click one of the tabs to be the only one that is showing and the rest of the tabs to be closed. Hope someone can help me to add that extra code that i need to make it work.

 var tabsContainer = document.getElementById("tabsContainer"); var tabUl = document.getElementById("tabs-ul"); var tabOne = document.getElementById("tab-one"); var tabTwo = document.getElementById("tab-two"); var tabThree = document.getElementById("tab-three"); var tabOneContent = document.getElementById("tab-one-content"); var tabTwoContent = document.getElementById("tab-two-content"); var tabThreeContent = document.getElementById("tab-three-content"); function openTabOne() { if (tabOneContent.className == "toggleTab") { tabOneContent.className = ""; } else { tabOneContent.className = "toggleTab"; } } function openTabTwo() { if (tabTwoContent.className == "toggleTab") { tabTwoContent.className = ""; } else { tabTwoContent.className = "toggleTab"; } } function openTabThree() { if (tabThreeContent.className == "toggleTab") { tabThreeContent.className = ""; } else { tabThreeContent.className = "toggleTab"; } } tabOne.addEventListener("click", openTabOne); tabTwo.addEventListener("click", openTabTwo); tabThree.addEventListener("click", openTabThree); 

 * { padding: 0px; margin: 0px; } body { font-family: sans-serif; font-weight: 14px; background: silver; } #tabsContainer { width: 50%; margin: 0 auto; border: 3px solid #a70d89; padding: 20px; box-shadow: 2px 2px 10px rgba(85, 85, 85, 0.77); ; } ul { list-style: none; } li { display: inline-block; padding: 5px 20px; background: #4c99ac; color: #7910c6; cursor: pointer; } #tabsContainer > div { margin: 20px 0px; display: none; } #tab-one-content.toggleTab, #tab-two-content.toggleTab, #tab-three-content.toggleTab { display: block; } 

 <div id="tabsContainer"> <ul id="tabs-ul"> <li id="tab-one">Tab One</li> <li id="tab-two">Tab Two</li> <li id="tab-three">Tab Three</li> </ul> <div id="tab-one-content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quam nesciunt, architecto earum! Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium. </div> <div id="tab-two-content"> Placeat quam nesciunt, architecto earum! Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium. </div> <div id="tab-three-content"> Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium. </div> </div> 

Answer 1

You need to remove the class from the tabs that you don't want open anymore, here is a possible way to do it.

 var tabsContainer = document.getElementById("tabsContainer"); var tabUl = document.getElementById("tabs-ul"); var tabOne = document.getElementById("tab-one"); var tabTwo = document.getElementById("tab-two"); var tabThree = document.getElementById("tab-three"); var tabPanels = [ document.getElementById("tab-one-content"), document.getElementById("tab-two-content"), document.getElementById("tab-three-content") ]; function showTab(tabIndex) { for(var i = 0; i < tabPanels.length; i++) { tabPanels[i].className = i == tabIndex ? 'toggleTab' : ''; } } function openTabOne() { showTab(0); } function openTabTwo() { showTab(1); } function openTabThree() { showTab(2); } openTabOne(); tabOne.addEventListener("click", openTabOne); tabTwo.addEventListener("click", openTabTwo); tabThree.addEventListener("click", openTabThree); 

 * { padding:0px; margin:0px; } body { font-family: sans-serif; font-weight: 14px; background:silver; } #tabsContainer { width:50%; margin:0 auto; border:3px solid #a70d89; padding:20px; box-shadow: 2px 2px 10px rgba(85, 85, 85, 0.77);; } ul { list-style: none; } li { display: inline-block; padding:5px 20px; background:#4c99ac; color:#7910c6; cursor: pointer; } #tabsContainer > div { margin: 20px 0px; display: none; } #tab-one-content.toggleTab, #tab-two-content.toggleTab, #tab-three-content.toggleTab { display: block; } 

 <div id="tabsContainer"> <ul id="tabs-ul"> <li id="tab-one">Tab One</li> <li id="tab-two">Tab Two</li> <li id="tab-three">Tab Three</li> </ul> <div id="tab-one-content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quam nesciunt, architecto earum! Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium. </div> <div id="tab-two-content"> Placeat quam nesciunt, architecto earum! Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium. </div> <div id="tab-three-content"> Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium. </div> </div>