Responsive Tabs/Accordion In Vanilla JavaScript – vanilla-tabs

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
});