Switch Between Tabs And Accordion On Resize - Bootstrap Tab Collapse

Bootstrap Tab Collapse is a small jQuery plugin for mobile-friendly Bootstrap tabs component that automatically switches to a collapsible accordion interface in smaller devices like mobile and tablet.

How to use it:

1. To use this plugin, make sure the Bootstrap framework and jQuery library are loaded in the html document.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"> </script>
<script src="/path/to/bootstrap/bootstrap.js"></script>

2. Download and place the JavaScript file bootstrap-tabcollapse.js after jQuery.

<script src="bootstrap-tabcollapse.js"></script>

3. Call the plugin on the existing Bootstrap tabs component and done.

<ul id="myTab" class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
  <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
          <li><a href="#dropdown3" data-toggle="tab">@fat</a></li>
          <li><a href="#dropdown4" data-toggle="tab">@mdo</a></li>
      </ul>
  </li>
</ul>
<div id="myTabContent" class="tab-content" >
  <div class="tab-pane fade" id="home">
      <p>Tab 1</p>
  </div>
  <div class="tab-pane fade in active" id="profile">
      <p>Tab 2</p>
  </div>
  <div class="tab-pane fade" id="dropdown3">
      <p>Tab 3</p>
  </div>
  <div class="tab-pane fade" id="dropdown4">
      <p>Tab 4</p>
  </div>
</div>

$('#myTab').tabCollapse();

4. Specify the CSS classes of the tabs and accordion components.

$('#myTab').tabCollapse({
  accordionClass: 'visible-xs',
  tabsClass: 'hidden-xs',
});

5. Event handlers.

$('#myTab').on('show-tabs.bs.tabcollapse', function(){
  // fired before shown (tabs)
});

$('#myTab').on('shown-tabs.bs.tabcollapse', function(){
  // fired after shown (tabs)
});

$('#myTab').on('show-accordion.bs.tabcollapse', function(){
  // fired before shown (accordion)
});

$('#myTab').on('shown-accordion.bs.tabcollapse', function(){
  // fired after shown (accordion)
});

---

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