Creating nested tabs using vanilla JavaScript, no need for jQuery

Question

Creating nested tabs using vanilla JavaScript, no need for jQuery

I am currently working on implementing tabs using a JavaScript function. The issue I am facing is that when I try to have tabs within one of the tabs, everything disappears every time I click on one of the inner tabs. This happens because the JavaScript function I am using sets the style.display to none.

My goal is to ensure that when doel1, doel2, or doel3 is clicked inside the 'POP' tab, the style.display of the 'POP' tab remains active.

Below is the JavaScript function I am using (sourced from w3school.com):

function openTab(evt, openTab) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(openTab).style.display = "block";
  evt.currentTarget.className += " active";
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'bla')">bla</button>
  <button class="tablinks" onclick="openTab(event, 'blabla')">blabla</button>
  <button class="tablinks" onclick="openTab(event, 'pop')">POP</button>
</div>

<div id="bla" class="tabcontent">
  <h2>bla</h2>
  <table>
    <tr>
      <td>My stuff that works :)</td>
    </tr>
  </table>
</div>
<div id="blabla" class="tabcontent">
  <h3>blabla</h3>
  <table>
    <tr>
      <td>My stuff that works ;)</td>
    </tr>
  </table>
</div>

<div id="pop" class="tabcontent">
  <h1>POP</h1>
  <div class="tab">
    <button class="tablinks" onclick="openTab(event, 'doel1')">Doel 1</button>
    <button class="tablinks" onclick="openTab(event, 'doel2')">Doel 2</button>
    <button class="tablinks" onclick="openTab(event, 'doel3')">Doel 3</button>
  </div>
  <div id="doel1" class="tabcontent">
    My stuff that doesn't show when I want :(
  </div>
</div>

javascript html css

Answer 1

Answer №1

Consider this solution for your problem: I have updated the function to include an additional parameter indicating if it is a sub tab. When it is a sub tab, the parent tab will remain active while the child tab becomes active.

function openTab(evt, openTab, subTab) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");

    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    if(subTab) {
      var parent = evt.currentTarget.closest('.tabcontent');
      parent.style.display = "block";
      parent.className += " active";
    }
    document.getElementById(openTab).style.display = "block";
    evt.currentTarget.className += " active";

}

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}


.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}


.tab button:hover {
background-color: #ddd;
}


.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

<div class="tab">
    <button class="tablinks" onclick="openTab(event, 'bla')">bla</button>
    <button class="tablinks" onclick="openTab(event, 'blabla')">blabla</button>
    <button class="tablinks" onclick="openTab(event, 'pop')">POP</button>
</div>

<div id="bla" class="tabcontent">
    <h2>bla</h2>
    <table>
        <tr><td>My stuff that works :)</td></tr>
    </table>
</div>
<div id="blabla" class="tabcontent">
    <h3>blabla</h3>
    <table>
        <tr><td>My stuff that works ;)</td></tr>
    </table>
</div>

<div id="pop" class="tabcontent">
    <h1>POP</h1>
    <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'doel1',true)">Doel 1</button>
        <button class="tablinks" onclick="openTab(event, 'doel2', true)">Doel 2</button>
        <button class="tablinks" onclick="openTab(event, 'doel3', true)">Doel 3</button>
    </div>
    <div id="doel1" class="tabcontent">
        My stuff that doesn't show when I  want :(
    </div>

    <div id="doel2" class="tabcontent">
        My stuff doel2
    </div>

    <div id="doel3" class="tabcontent">
        My stuff doel3
    </div>
</div>

Answer 2

Consider this solution for your problem: I have updated the function to include an additional parameter indicating if it is a sub tab. When it is a sub tab, the parent tab will remain active while the child tab becomes active.

function openTab(evt, openTab, subTab) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");

    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    if(subTab) {
      var parent = evt.currentTarget.closest('.tabcontent');
      parent.style.display = "block";
      parent.className += " active";
    }
    document.getElementById(openTab).style.display = "block";
    evt.currentTarget.className += " active";

}

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}


.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}


.tab button:hover {
background-color: #ddd;
}


.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

<div class="tab">
    <button class="tablinks" onclick="openTab(event, 'bla')">bla</button>
    <button class="tablinks" onclick="openTab(event, 'blabla')">blabla</button>
    <button class="tablinks" onclick="openTab(event, 'pop')">POP</button>
</div>

<div id="bla" class="tabcontent">
    <h2>bla</h2>
    <table>
        <tr><td>My stuff that works :)</td></tr>
    </table>
</div>
<div id="blabla" class="tabcontent">
    <h3>blabla</h3>
    <table>
        <tr><td>My stuff that works ;)</td></tr>
    </table>
</div>

<div id="pop" class="tabcontent">
    <h1>POP</h1>
    <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'doel1',true)">Doel 1</button>
        <button class="tablinks" onclick="openTab(event, 'doel2', true)">Doel 2</button>
        <button class="tablinks" onclick="openTab(event, 'doel3', true)">Doel 3</button>
    </div>
    <div id="doel1" class="tabcontent">
        My stuff that doesn't show when I  want :(
    </div>

    <div id="doel2" class="tabcontent">
        My stuff doel2
    </div>

    <div id="doel3" class="tabcontent">
        My stuff doel3
    </div>
</div>

Answer 3

Answer №2

I've made some adjustments here to target specific tabs for modification:

html:

<div class="tabs">
  <ul>
    <li>
      <button class="tablink active" onclick="openTab(event, 'tab1', 'parent')">
        Tab 1
      </button>
    </li>
    <li>
      <button class="tablink" onclick="openTab(event, 'tab2', 'parent')">
        Tab 2
      </button>
    </li>
    <li>
      <button class="tablink" onclick="openTab(event, 'tab3', 'parent')">
        Tab 3
      </button>
    </li>
  </ul>
</div>

<div id="tab1" class="parent active">
  <h2>Tab 1</h2>
</div>

<div id="tab2" class="parent">
  <h2>Tab 2</h2>
</div>

<div id="tab3" class="parent">
  <h2>Tab 3</h2>
  <div class="tabs">
    <ul>
      <li>
        <button class="subtablink active" onclick="openTab(event, 'tab1', 'child')">
          Tab 3a
        </button>
      </li>
      <li>
        <button class="subtablink" onclick="openTab(event, 'tab2', 'child')">
          Tab 3b
        </button>
      </li>
    </ul>
  </div>

  <div id="tab1" class="child active">
    <h2>Tab 3a</h2>
  </div>

  <div id="tab2" class="child">
    <h2>Tab 3b</h2>
  </div>

</div>

CSS:

.parent, .child {
  display: none;
}

.parent.active, .child.active {
  display: block;
}

.tablink.active, .subtablink.active {
  background: red;
}

Javascript:

function openTab(event, tab, set) {
  // Hide all tabs in scope
  const className = '.' + set;
  document.querySelectorAll(className).forEach(function(item) {
    item.className = set;
  });

  // Show selected tab
  const fullPath = className + '#' + tab;
  document.querySelector(fullPath).classList.add('active');

  // Set Tab to active (and deactivate others)
  const siblingClass = event.target.className;
  document.querySelectorAll('.' + siblingClass).forEach(function(item) {
    item.classList.remove('active');
  });
  event.target.classList.add('active');
}

I've implemented some basic styling adjustments. You can see it in action here: https://codepen.io/anon/pen/VyzWPQ

Just to clarify, the tab navigation links have unique classes (tablink & subtablink) based on their scope. You can customize these names as needed, especially if you have sub tabs within another parent tab. The javascript utilizes this to remove the active class from siblings when a button is clicked.

Answer 4

I've made some adjustments here to target specific tabs for modification:

html:

<div class="tabs">
  <ul>
    <li>
      <button class="tablink active" onclick="openTab(event, 'tab1', 'parent')">
        Tab 1
      </button>
    </li>
    <li>
      <button class="tablink" onclick="openTab(event, 'tab2', 'parent')">
        Tab 2
      </button>
    </li>
    <li>
      <button class="tablink" onclick="openTab(event, 'tab3', 'parent')">
        Tab 3
      </button>
    </li>
  </ul>
</div>

<div id="tab1" class="parent active">
  <h2>Tab 1</h2>
</div>

<div id="tab2" class="parent">
  <h2>Tab 2</h2>
</div>

<div id="tab3" class="parent">
  <h2>Tab 3</h2>
  <div class="tabs">
    <ul>
      <li>
        <button class="subtablink active" onclick="openTab(event, 'tab1', 'child')">
          Tab 3a
        </button>
      </li>
      <li>
        <button class="subtablink" onclick="openTab(event, 'tab2', 'child')">
          Tab 3b
        </button>
      </li>
    </ul>
  </div>

  <div id="tab1" class="child active">
    <h2>Tab 3a</h2>
  </div>

  <div id="tab2" class="child">
    <h2>Tab 3b</h2>
  </div>

</div>

CSS:

.parent, .child {
  display: none;
}

.parent.active, .child.active {
  display: block;
}

.tablink.active, .subtablink.active {
  background: red;
}

Javascript:

function openTab(event, tab, set) {
  // Hide all tabs in scope
  const className = '.' + set;
  document.querySelectorAll(className).forEach(function(item) {
    item.className = set;
  });

  // Show selected tab
  const fullPath = className + '#' + tab;
  document.querySelector(fullPath).classList.add('active');

  // Set Tab to active (and deactivate others)
  const siblingClass = event.target.className;
  document.querySelectorAll('.' + siblingClass).forEach(function(item) {
    item.classList.remove('active');
  });
  event.target.classList.add('active');
}

I've implemented some basic styling adjustments. You can see it in action here: https://codepen.io/anon/pen/VyzWPQ

Just to clarify, the tab navigation links have unique classes (tablink & subtablink) based on their scope. You can customize these names as needed, especially if you have sub tabs within another parent tab. The javascript utilizes this to remove the active class from siblings when a button is clicked.

Answer 5

Answer №3

function switchTab(event, tabName, subTab) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");

    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    if(subTab) {
      var parent = event.currentTarget.closest('.tabcontent');
      parent.style.display = "block";
      parent.className += " active";
    }
    document.getElementById(tabName).style.display = "block";
    event.currentTarget.className += " active";

}

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}


.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}


.tab button:hover {
background-color: #ddd;
}


.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

<div class="tab">
    <button class="tablinks" onclick="switchTab(event, 'bla')">bla</button>
    <button class="tablinks" onclick="switchTab(event, 'blabla')">blabla</button>
    <button class="tablinks" onclick="switchTab(event, 'pop')">POP</button>
</div>

<div id="bla" class="tabcontent">
    <h2>bla</h2>
    <table>
        <tr><td>My content here :)</td></tr>
    </table>
</div>
<div id="blabla" class="tabcontent">
    <h3>blabla</h3>
    <table>
        <tr><td>My content here ;)</td></tr>
    </table>
</div>

<div id="pop" class="tabcontent">
    <h1>POP</h1>
    <div class="tab">
        <button class="tablinks" onclick="switchTab(event, 'doel1',true)">Goal 1</button>
        <button class="tablinks" onclick="switchTab(event, 'doel2', true)">Goal 2</button>
        <button class="tablinks" onclick="switchTab(event, 'doel3', true)">Goal 3</button>
    </div>
    <div id="doel1" class="tabcontent">
        My content that doesn't show when I want :(
    </div>

    <div id="doel2" class="tabcontent">
        My content goal 2
    </div>

    <div id="doel3" class="tabcontent">
        My content goal 3
    </div>
</div>

Thank you :)

Answer 6

function switchTab(event, tabName, subTab) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");

    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    if(subTab) {
      var parent = event.currentTarget.closest('.tabcontent');
      parent.style.display = "block";
      parent.className += " active";
    }
    document.getElementById(tabName).style.display = "block";
    event.currentTarget.className += " active";

}

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}


.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}


.tab button:hover {
background-color: #ddd;
}


.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

<div class="tab">
    <button class="tablinks" onclick="switchTab(event, 'bla')">bla</button>
    <button class="tablinks" onclick="switchTab(event, 'blabla')">blabla</button>
    <button class="tablinks" onclick="switchTab(event, 'pop')">POP</button>
</div>

<div id="bla" class="tabcontent">
    <h2>bla</h2>
    <table>
        <tr><td>My content here :)</td></tr>
    </table>
</div>
<div id="blabla" class="tabcontent">
    <h3>blabla</h3>
    <table>
        <tr><td>My content here ;)</td></tr>
    </table>
</div>

<div id="pop" class="tabcontent">
    <h1>POP</h1>
    <div class="tab">
        <button class="tablinks" onclick="switchTab(event, 'doel1',true)">Goal 1</button>
        <button class="tablinks" onclick="switchTab(event, 'doel2', true)">Goal 2</button>
        <button class="tablinks" onclick="switchTab(event, 'doel3', true)">Goal 3</button>
    </div>
    <div id="doel1" class="tabcontent">
        My content that doesn't show when I want :(
    </div>

    <div id="doel2" class="tabcontent">
        My content goal 2
    </div>

    <div id="doel3" class="tabcontent">
        My content goal 3
    </div>
</div>

Thank you :)

Creating nested tabs using vanilla JavaScript, no need for jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Equivalent of ResolveUrl for loading scripts without the need for server technology

Transform the appearance of buttons within AppBar using Material UI React

The HTML date input is displaying the date incorrectly, appearing one month off when set via the value attribute

Optimal-minimal behavior with a versatile CSS grid system

Library for creating custom password input fields with a text type

How can I transition smoothly between two colors in three.js?

Intellij IDEA does not offer auto-completion for TypeScript .d.ts definitions when a function with a callback parameter is used

The error message "Uncaught ReferenceError: require is not defined" is commonly encountered when using Webpack

The error message "Cannot construct apickli.Apickli" is indicating a Type Error

How can I address multiple buttons with various events using jQuery?

Proper alignment of div elements using Bootstrap

Can state values be utilized as content for Meta tags?

Exploring the implementation of waterfall in a Node.js application

Improving the structure of Vue single-file components

Creating a Dynamic Slideshow on Autopilot

"Learn how to transfer a selected value from a parent ASP.NET dropdownlist to a textbox in a popup window using JavaScript

React Semantic UI Grid and Div components can be toggled by using a button to decrease

"Exploring the Depths: How Node.js Utilizes Recursive Calls

An issue with the THREE.js TextureLoader not functioning properly when deployed

Dealing with undefined or null values when using ReactJS with Formik