reusable tab with nesting feature

Hi everyone ! hope you having a great day.

while working project to projects, a developer may have to reuse things that he has already built before.

so based on my experience, I have to build some component like tab or accordion or any other similar thing again and again in projects to projects.

So, I thought to built a tab and if I need to build a tab next time in any project I am going to use the same tab that I have already built which will save a huge time for me.

Then I came up with this this blog . Thanks to Josh Stoddard . I have took reference from his code while trying to make it more effective to use.

And it can be use in multiple section in a page (many different tabs).

so demo below !

keeping in mind few things to use this tab would be helpful.

the header of the tab must have .tab class
tab items must be wrapped with .tab__list
tab contents items must be wrapped with .tab__content
if other than first item is required to show active initially, add is--active class on the tab__item
if you are going to use nested tab, repeating 1 to 3 is necessary