Here is my attempt on modifying the tabs-plugin to allow ‘Nested’ Tabs.

Link to the Modified Plugin.

Demo Generator using the modified plugin.

This was made to address the problem of SynthAce (asked at the Perchance Hub - Learn Tab)

Technical Notes
  • I have reverted the ‘minified’ window.Tabs function to the un-minified to learn more about how the function works.

The code is originally from Zoltantothcom’s Vanilla JavaScript Tabs Project

  • On the let titles code, I have removed the onclick on the <li> elements as removing them didn’t have any impact on the plugin. I have also added a dataset attribute tablist on the <a> elements inside the <li> elements which will be the tabListKey (this is important to only reset the current tab’s list and not all the tabs).
  • On the let contents code, I’ve also renamed the data-belongs-to-tab-list to just data-tablist.
  • On the main div with class tabs-plugin, I’ve also added the data-tablist to specify which tab has which key.
  • On the reverted Tabs function, I’ve added a tabList variable which is taken from the tab list key of the main tab element.
  • I’ve modified the reset function to pass through the tab list key to only reset the tab with the same keys, preventing resetting of the other tabs. It uses the querySelectorAll and selects only the items with the specified tab list key.
  • I’ve also modified the onClick function to pass through the tab list key to only update ( and reset ) the specified tab. Since previously it would update all tabs which causes problems in nested tabs.