Responsive Tabs

Responsive Tabs Example

This example illustrates how the responsive tabs works. It uses the standard Bootstrap 2.3.2 responsive CSS and HTML, so it also adapts to your viewport and device.

To see the difference just resize the width of your window.

Steps

  1. Include bootstrap css and js.
  2. Include responsive-tabs.js.
  3. Setup tabs per the bootstrap documents.
  4. Add a responsive class to the ul that is used to create the tabs.
  5. Add a responsive class to the div that is used to create the tab-content.
  6. Call fakewaffle.responsiveTabs(['phone', 'tablet']); in your load up script, while passing an array of bootstrap sizes that you want the to be displayed as accordions, e.g. ['phone', 'tablet'] which is used by default.

Example Markup

Note: The only difference from the standard bootstrap tab markup to the responsive markup is the addition of the responsive, and calling the fakewaffle.responsiveTabs(); function. 
<ul class="nav nav-tabs responsive" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
</ul>

<div class="tab-content responsive">
  <div class="tab-pane active" id="home">...content...</div>
  <div class="tab-pane" id="profile">...content...</div>
  <div class="tab-pane" id="messages">...content...</div>
</div>

<script type="text/javascript">
  (function($) {
      fakewaffle.responsiveTabs(['xs', 'sm']);
  })(jQuery);
</script>
  • Uses standard bootstrap tab markup
  • Accordion is created with jquery
  • Tabs and Accordion are the fully accessible via keyboard
  • Supports multiple tabs on a page, with or without being responsive

Source code

You may download the source code from github.

Reporting issues

If you have any issues with this please report in on github.

Contributing

If you'd like to contribute to this project, you can fork the project send a pull request.