Switch Tabs To Vertical Accordions On The Mobile - best-responsive.js

Yet another jQuery based responsive tabs solution that automatically switches the horizontal tabs to a vertical accordion interface when the screen width reaches a responsive breakpoint you specify.

How to use it:

1. Insert jQuery library and the jQuery best-responsive.js plugin's files into the HTML file.

<link rel="stylesheet" href="/path/to/src/best-responsive.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script> 
<script src="/path/to/src/best-responsive.js"></script>

2. Create tab panels on the webpage.

<div class="best-responsive-tab-contents" id="myExampleTabsContent" aria-labelledby="myExampleBestResponsiveTab">
  <div class="best-responsive-tab-content" role="tabpanel">Content 1</div>
  <div class="best-responsive-tab-content" role="tabpanel">Content 2</div>
  <div class="best-responsive-tab-content" role="tabpanel">Content 3</div>
</div>

3. Create a tab navigation pointing to the tab content.

<div class="best-responsive-tab" id="myExampleBestResponsiveTab" role="tablist" data-target-content="#myExampleTabsContent">
  <div data-target-index="0">One</div>
  <div data-target-index="1">Two</div>
  <div data-target-index="2">Three</div>
</div>

4. Initialize the responsive tabs with default settings.

$('#myExampleBestResponsiveTab').laraGemsBestResponsiveTabs({
  container: $('#myExampleTabsContent')
});

5. Specify the breakpoint in the JavaScript. Default: 767px.

$('#myExampleBestResponsiveTab').laraGemsBestResponsiveTabs({
  container: $('#myExampleTabsContent'),
  break_point: 467
});

6. Set the tab index to open on init. Default: tab 1.

$('#myExampleBestResponsiveTab').laraGemsBestResponsiveTabs({
  container: $('#myExampleTabsContent'),
  active_tab_index: 1 // tab 2
});

7. Execute a callback function when toggling tabs.

$('#myExampleBestResponsiveTab').on('lgTabItem:toogle', function(event, previous_item, next_item){
  console.log('Previous item', previous_item);
  console.log('Next item', next_item);
});

---

This awesome jQuery plugin is developed by NilGems. For more Advanced Usages, please check the demo page or visit the official website.