Author: | DKudleichuk |
---|---|
Views Total: | 2,909 views |
Official Page: | Go to website |
Last Update: | August 6, 2019 |
License: | MIT |
Preview:

Description:
vanilla-tabs is a native JavaScript plugin to generate mobile-friendly horizontal or vertical tabs from unordered HTML lists.
The plugin detects the screen width and automatically transforms the tabs into a responsive accordion on mobile devices.
How to use it:
Load the vanilla.tabs.css
and vanilla.tabs.js
files from the dist
folder.
<link rel="stylesheet" href="dist/vanilla.tabs.css" /> <script src="dist/vanilla.tabs.js"></script>
Create a normal html list for the tabs.
<ul class="tabs"> <li data-title="First tab" class="tabs__content"> Tab 1 </li> <li data-title="Second tab" class="tabs__content"> Tab 2 </li> <li data-title="Third tab" class="tabs__content"> Tab 3 </li> ... more tabs here </ul>
Initialize the plugin and done.
new VanillaTabs();
Generate a vertical tabs interface from the HTML list.
new VanillaTabs({ 'type': 'vertical' });
Generate a responsive accordion from the HTML list.
new VanillaTabs({ 'type': 'accordion' });
Customize the breakpoint in pixels. Default: 840px.
new VanillaTabs({ 'responsiveBreak': 768 });
Set the tab index to be opened on init. Default: 0 (tab 1).
new VanillaTabs({ 'activeIndex' : 1 });