Create Responsive Collapsible Bootstrap Tabs Using jQuery

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


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

  • Publication date: 25.04.2018
  • Source