How to create tabs in javascript?

Question

I've been trying to create tabs in JavaScript. When clicking on a new tab the active class should be applied to it as well as its associated panel content should be displayed. However, the active class isn't being applied when another tab is clicked and the panels are not changing either, they are just stacking on top of each other.

const tabs = document.querySelector(".tabs");
const active = document.querySelector(".active");
const panel = document.querySelector(".panel");

function onTabClick(event) {

  // deactivate existing active tabs and panel
  active.classList.remove('.active');

  for (let i = 0; i < panel.length; i++) {
    panel[i].style.display = "none";
  }


  // activate new tabs and panel
  event.target.classList.add('.active');
  let classString = event.target.innerHTML;
  console.log(classString);
  document.getElementsByClassName(classString)[0].style.display = "block";
}

tabs.addEventListener('click', onTabClick, false);

.tabs {
  display: flex;
  justify-content: space-around;
  margin: 20px 2px 40px 2px;
  height: 40px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}

.tabs>* {
  width: 100%;
  color: dimgray;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs>*:hover:not(.active) {
  background-color: rgb(220, 220, 220);
}

.tabs>.active {
  color: white;
  background-color: #4CAF50;
}

.panel {
  display: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div class="tabs">
    <div class="tab active">List</div>
    <div class="tab">Grid</div>
    <div class="tab">something</div>
  </div>
  <div class="Lists panel" style='display:block'>
    panel 1 text
  </div>
  <div class="Grid panel">
    panel 2 text
  </div>
  <div class="something panel">
    panel 3 text
  </div>

</body>

</html>

isherwood · Accepted Answer · 2021-06-24 15:06:43Z

In your JavaScript when getting all the elements of a specific class, document.querySelecto(".className") only grabs the first element with the given class. To get all the elements, you'll have to use document.querySelectorAll(".className").

Then when adding or removing a class from an element, you don't put the point before the class name. So instead of tab[i].classList.remove(".active");, it should be tab[i].classList.remove("active");.

Also, instead of explicity hiding the panel elements, I used an active class which will be applied to panel associated tab.

Finally, you should not use the tab text as the class name for the respective panel. This would be problematic when you have multiple words in the tab text. What I did was use the data attribute of the tabs to specify the relative class of the panel and place all the panels in a div element .panels. Now you can put what ever text you want in the tabs and using the data-target attribute, place the class name for the panel.

const tabs = document.querySelectorAll(".tabs");
const tab = document.querySelectorAll(".tab");
const panel = document.querySelectorAll(".panel");

function onTabClick(event) {

  // deactivate existing active tabs and panel

  for (let i = 0; i < tab.length; i++) {
    tab[i].classList.remove("active");
  }

  for (let i = 0; i < panel.length; i++) {
    panel[i].classList.remove("active");
  }


  // activate new tabs and panel
  event.target.classList.add('active');
  let classString = event.target.getAttribute('data-target');
  console.log(classString);
  document.getElementById('panels').getElementsByClassName(classString)[0].classList.add("active");
}

for (let i = 0; i < tab.length; i++) {
  tab[i].addEventListener('click', onTabClick, false);
}

.tabs {
  display: flex;
  justify-content: space-around;
  margin: 20px 2px 40px 2px;
  height: 40px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}

.tabs>* {
  width: 100%;
  color: dimgray;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs>*:hover:not(.active) {
  background-color: rgb(220, 220, 220);
}

.tabs>.active {
  color: white;
  background-color: #4CAF50;
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

<div class="tabs">
  <div class="tab active" data-target="Lists">Lists</div>
  <div class="tab" data-target="Grid">Grid</div>
  <div class="tab" data-target="Something">Something</div>
</div>
<div id="panels">
  <div class="Lists panel active">
    panel 1 text
  </div>
  <div class="Grid panel">
    panel 2 text
  </div>
  <div class="Something panel">
    panel 3 text
  </div>
</div>

Being Explorer · Accepted Answer · 2021-07-30 10:18:30Z

let overlayTabs = document.querySelectorAll(".left-tab-overlay li")
let overlayTabId = document.querySelectorAll('.main-nav-tab')
let tabContent = document.querySelectorAll(".panel-collapse")
overlayTabs.forEach(data => {
  data.parentNode.firstChild.classList.add("active")
  data.addEventListener('click', function(e) {
    const id = e.currentTarget.dataset.id
    if (id) {
      overlayTabId.forEach(data => {
        data.classList.remove("active")
      })
      e.target.classList.add("active");
      tabContent.forEach(data => {
        data.classList.remove("in")
      });
      const element = document.getElementById(id);
      element.classList.add("in")
    }
  });
});

Yoou can use foreach loops with tabs to dynamically toggle using active class

<!--loop here in html for tabs-->
{% for tabsitem in item.tabs %}
<li data-id="{{tabsitem.id}}" class="main-nav-tab"><a data-toggle="tab">{{tabsitem.text}}</a></li>
{% endfor %}
<!--loop here in html  for tabs bootstrap tab ref-->
<div class="tab-content">
  {% for item in itemblock %}
  <div class="tab-pane">
    <div id="{{item.id}}" class="panel-collapse collapse in">
      my content
    </div>
  </div>
  {% endfor %}

anville95 · Accepted Answer · 2024-03-19 12:47:29Z

I noticed this problem and thought of solving it once and for all for as many people as I can. I made a library for addition, manipulation, customisation and removal of tabs in JavaScript. The library is just a single file that has everything you need. I don't want to make the response long and boring, therefore, in order to view the documentation, after referencing the file, just call showDocumentation() and in order to view a list of functions and their required arguments, call showListFunctions(). THE DOCUMENTATION IS ONLY TWELVE SHORT STEPS and it will enable you to know the suitable tab types for you as well as other style customisation functions. I will now proceed to provide an example of adding swipable tabs to a container. There are methods in the library for addition of other types of tabs and I provided the information both in the list of functions and documentation. Please note that for the functions to work as expected, THE DOCUMENT MUST AT LEAST HAVE HEAD AND BODY. The example for swipable tabs is as follows:

let firstTab = document.createElement("div");
firstTab.innerHTML = "FIRST TAB <br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content";
firstTab.style.textAlign = "center";
firstTab.style.color="white";

let secondTab = document.createElement("div");
secondTab.innerHTML = "SECOND TAB <br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content";
secondTab.style.textAlign = "center";
secondTab.style.color="white";

let thirdTab = document.createElement("div");
thirdTab.innerHTML = "THIRD TAB <br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content";
thirdTab.style.textAlign = "center";
thirdTab.style.color="white";

let fourthTab = document.createElement("div");
fourthTab.innerHTML = "FOURTH TAB <br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content";
fourthTab.style.textAlign = "center";
fourthTab.style.color="white";

let fifthTab = document.createElement("div");
fifthTab.innerHTML = "FIFTH TAB <br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content";
fifthTab.style.textAlign = "center";
fifthTab.style.color="white";

let sixthTab = document.createElement("div");
sixthTab.innerHTML = "SIXTH TAB <br> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content";
sixthTab.style.textAlign = "center";
sixthTab.style.color="white";

let tabsObjectsArray = [firstTab, secondTab, thirdTab, fourthTab, fifthTab, sixthTab];

let tabNamesArray = ["TAB_ONE", "TAB_TWO", "TAB_THREE", "TAB_FOUR", "TAB_FIVE", "TAB_SIX"]

addSwipableTabs("sampleContainerElement", tabsObjectsArray, tabNamesArray);

#sampleContainerElement{
    display: table;
    height: 50vh;
    width: 50vw;
    margin: 2vh auto;
    border: solid 1px gold;
    border-radius: 2vh;
    background-color: black;
}

<!--Referencing the script first-->
<script type="text/javascript" src="https://anville95work.github.io/scripts/JavaScriptTabsLibrary.js"></script>
<style>

</style>
<div id="sampleContainerElement">
    <!--This is the container view. Container view must be empty and must not be modified directly-->
</div>

Collectives™ on Stack Overflow

How to create tabs in javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related