Responsive Tabs

Responsive Tabs Example

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

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

Examples

Responsive Tabs

Tabs with an assigned id.

  1. First tab initialized as active.
  2. First and third tab have a deco-none class and the first has an additional red-class that are copied to the anchor tags in the accordions.
  3. First two tabs have extra class test-class that are copied to the div.panel-default in the accordions.
Tab 1 ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu posuere tortor. Phasellus consectetur aliquet risus, in lacinia erat ullamcorper a. Suspendisse molestie porta metus, at cursus elit. Quisque et neque nec velit tincidunt fringilla.
Tab 2 ... Phasellus consectetur aliquet risus, in lacinia erat ullamcorper a. Suspendisse molestie porta metus, at cursus elit. Quisque et neque nec velit tincidunt fringilla. Morbi eget nisi molestie, egestas turpis non, pharetra orci. Donec mattis sem ipsum, eu dapibus lacus rutrum in. Fusce blandit mi leo, non feugiat nunc tempus vitae.
Tab 3 ... Quisque et neque nec velit tincidunt fringilla. Morbi eget nisi molestie, egestas turpis non, pharetra orci. Donec mattis sem ipsum, eu dapibus lacus rutrum in. Fusce blandit mi leo, non feugiat nunc tempus vitae. Mauris hendrerit, leo sit amet mollis bibendum, lacus augue auctor turpis, sed placerat augue libero quis massa.

Tabs without an assigned id.

  1. Second tab initialized as active.
  2. Tabs are inside a panel.
  3. Fourth tab has panels within it.

Panel containing responsive tabs

Home ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu posuere tortor. Phasellus consectetur aliquet risus, in lacinia erat ullamcorper a. Suspendisse molestie porta metus, at cursus elit. Quisque et neque nec velit tincidunt fringilla.
Profile ... Phasellus consectetur aliquet risus, in lacinia erat ullamcorper a. Suspendisse molestie porta metus, at cursus elit. Quisque et neque nec velit tincidunt fringilla. Morbi eget nisi molestie, egestas turpis non, pharetra orci. Donec mattis sem ipsum, eu dapibus lacus rutrum in. Fusce blandit mi leo, non feugiat nunc tempus vitae.
Messages ... Quisque et neque nec velit tincidunt fringilla. Morbi eget nisi molestie, egestas turpis non, pharetra orci. Donec mattis sem ipsum, eu dapibus lacus rutrum in. Fusce blandit mi leo, non feugiat nunc tempus vitae. Mauris hendrerit, leo sit amet mollis bibendum, lacus augue auctor turpis, sed placerat augue libero quis massa.

Fourth ...

Panel heading without title
Panel content

Panel title

Panel content

Standard Tabs (Non-Responsive)

Markup Content ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet fermentum risus sed ullamcorper. Nulla condimentum sagittis quam. Duis viverra egestas ante, vel blandit elit dictum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Profile 2 Content ... Ut laoreet fermentum risus sed ullamcorper. Nulla condimentum sagittis quam. Duis viverra egestas ante, vel blandit elit dictum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus fermentum dui at viverra pulvinar.
Messages 2 Content ... Duis viverra egestas ante, vel blandit elit dictum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus fermentum dui at viverra pulvinar. Donec eu ipsum ut tellus convallis posuere. Sed tempor turpis laoreet dignissim mattis.

Documentation

How to use

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>

Key Features

Additional Items

Source

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.