Just tabs... Nothing else.
Install in your project
npm i justabs
Import it
// JS
import justabs from 'justabs'
// css
import 'justabs/dist/css/justabs.min.css'
The ideia of this plugin is it to be as lightweight as possible, and do the job easily. All you have to do is separate the tabs and panels.
// Tabs
<div data-tab="myJusTabs" class="justabs">
...
</div>
// Panels
<div data-panel="myJusTabs" class="justabs-panels">
...
</div>
Notice that data-tab and data-panel have the same name, therefor they are bound to each other. And also remember to use the justabs classes as shown in the example.
Now you can create the tabs and panels.
// Tabs
<div data-tab="myJusTabs" class="justabs">
<div data-target="panel1" class="active">Tab 1</div>
<div data-target="panel2">Tab 2</div>
...
</div>
// Panels
<div data-panel="myJusTabs" class="justabs-panels">
<div data-name="panel1" class="active">Panel 1</div>
<div data-name="panel2">Panel 2</div>
...
</div>
Now that each tab is targeting a panel, go ahead and run the function passing the data-tab/data-panel name to give it life.
justabs('myJusTabs')