Switch Between Tabs And Accordion On Resize - Bootstrap Tab Collapse
File Size: | 78 KB |
---|---|
Views Total: | 12536 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.