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.

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

Thank you !

enjoy !