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 theonclick
on the<li>
elements as removing them didn’t have any impact on the plugin. I have also added a dataset attributetablist
on the<a>
elements inside the<li>
elements which will be thetabListKey
(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 thedata-belongs-to-tab-list
to justdata-tablist
. - On the main div with class
tabs-plugin
, I’ve also added thedata-tablist
to specify which tab has which key. - On the reverted
Tabs
function, I’ve added atabList
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 thequerySelectorAll
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.
You must log in or register to comment.
@[email protected] - looking for insights 🤔