Responsive Tabs & Accordion Component In Vanilla JavaScript

Preview:

Description:

A responsive tabs & accordion JavaScript plugin that works perfectly on desktop, tablet, and mobile.

The tabs transform to an accordion when it reaches a CSS breakpoint (840px by default).

How to use it:

1. Add the stylesheet vanilla-tabs.min.css and JavaScript vanilla-tabs.min.js to the page.

<link rel="stylesheet" href="dist/vanilla-tabs.min.css" />
<script src="dist/vanilla-tabs.min.js"></script>

2. Create a tabs component from an HTML unordered list.

<ul id="example" class="tabs">
  <li data-title="First tab">
    <h2>Heading 1</h2>
  </li>
  <li data-title="Second tab">
    <h2>Heading 2</h2>
  </li>
  <li data-title="Third tab">
    <h2>Heading 3</h2>
  </li>
</ul>

3. Create a horizontal tabs component.

new VanillaTabs({
    'selector': '#example',
    'type': 'horizontal', 
});

4. Create a vertical tabs component.

new VanillaTabs({
    'selector': '#example',
    'type': 'vertical', 
});

5. Create an accordion instead.

new VanillaTabs({
    'selector': '#example',
    'type': 'accordion', 
});

6. Override the default breakpoint in px.

new VanillaTabs({
    'selector': '#example',
    'type': 'horizontal', 
    'responsiveBreak': 468,
});

7. Set the initial tab on init. Default: 0.

new VanillaTabs({
    'selector': '#example',
    'type': 'horizontal', 
    'activeIndex': 1, // tab 2
});