❤
npm
Sign UpSign In

bootstrap-responsive-tabs

2.0.3 • Public • Published

bootstrap-responsive-tabs

"Bootstrap Responsive Tabs" is a simple jQuery plugin that switches the default bootstrap tabs to accordions on the viewports that you choose to.

Demo: http://vtimbuc.github.io/bootstrap-responsive-tabs/

How to use it

Load the required css file in <head> and js file before </body>:

<link rel="stylesheet" href="dist/css/bootstrap-responsive-tabs.css">
<script src="dist/js/jquery.bootstrap-responsive-tabs.min.js"></script>

Then call the plugin:

$('.responsive-tabs').responsiveTabs({
  accordionOn: ['xs', 'sm'] // xs, sm, md, lg
});

The tabs markup is the same as bootstrap's without the data-toggle attribute, you only need to add a class to .nav-tabs:

<ul class="nav nav-tabs responsive-tabs">
  <li class="active"><a href="#home1">Home</a></li>
  <li><a href="#profile1">Profile</a></li>
</ul>
 
<div class="tab-content">
  <div class="tab-pane active" id="home1">
    <p>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
 
  <div class="tab-pane" id="profile1">
    <p>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>

jsFiddle demo

Readme

Keywords

Package Sidebar

Install

npm i bootstrap-responsive-tabs

Repository

github.com/vtimbuc/bootstrap-responsive-tabs

Homepage

vtimbuc.github.io/bootstrap-responsive-tabs/

Weekly Downloads

275

Version

2.0.3

License

WTFPL

Last publish

Collaborators

  • vtimbuc
Try on RunKit
Report malware