Create Responsive Collapsible Bootstrap Tabs Using jQuery

Just another jQuery plugin that makes your Bootstrap tabs component fully responsive and mobile friendly by collapsing overflowed tabs into a toggleable dropdown list on small screens.

How to use it:

1. Import the core JavaScript file jquery.responsivetabs.js into the webpage which has both jQuery and Bootstrap loaded.

<script src="//code.jquery.com/jquery.min.js"></script>  
<script src="bootstrap.min.js"></script>
<script src="jquery.responsivetabs.js"></script>

2. Create tabs and tab panes as follows:

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#tab-1" aria-controls="home" role="tab" data-toggle="tab">Tab 1</a></li>
  <li role="presentation"><a href="#tab-2" aria-controls="profile" role="tab" data-toggle="tab">Tab 2</a></li>
  <li role="presentation"><a href="#tab-3" aria-controls="profile" role="tab" data-toggle="tab">Tab 3</a></li>
  <li role="presentation"><a href="#tab-4" aria-controls="profile" role="tab" data-toggle="tab">Tab 4</a></li>
  <li role="presentation"><a href="#tab-5" aria-controls="profile" role="tab" data-toggle="tab">Tab 5</a></li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="tab-1">
      <h3>Tab 1</h3>
      <p>Tab Content 1</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="tab-2">
      <h3>Tab 2</h3>
      <p>Tab Content 2</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="tab-3">
      <h3>Tab 3</h3>
      <p>Tab Content 3</p>
  </div>
  <div role="tabpanel" class="tab-pane" id="tab-4">
      <h3>Tab 4</h3>
      <p>Tab Content 4</p>
  </div>   
  <div role="tabpanel" class="tab-pane" id="tab-5">
      <h3>Tab 5</h3>
      <p>Tab Content 5</p>
  </div>              
</div>

3. Call the function on the nav tab and the plugin will do the rest.

$('.nav-tabs').responsiveTabs();

Change log:

2018-04-25

• Updated for Bootstrap 4
• Updated for Bootstrap 3

---

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