Responsive Tabs

Responsive Tabs Example

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

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

Responsive Tabs

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(['xs', 'sm']); in your load up script, while passing an array of bootstrap sizes that you want the to be displayed as accordions, e.g. ['xs', 'sm'] 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.

Standard Non-Responsive Tabs

Example Markup

Note: This is the standard markup, which is the same as the responsive setup but without the addition of the responsive class. 
<ul class="nav nav-tabs 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">
  <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>
... Profile 2 Content ...
... Messages 2 Content ...