Responsive Tabs Demo

www.petelove.com | Follow me on Twitter

In this example, the media query breakpoint is set 768px.

Resize window below 768px and controls will be an accordion.
Resize to 768px or above and they will appear as regular tabs.

Key features

How to use

  1. Include jQuery (minimum version 1.5.1 and above)
  2. Include responsiveTabs.js
  3. Include the css from responsive-tabs.css, and adjust the media query breakpoint as desired
  4. Markup your tabs regions as follows:
    <div class="responsive-tabs">
      <h2>[...]</h2>
      <div>[...]</div>
      <h2>[...]</h2>
      <div>[...]</div>
    </div>
    					
    The headings can be any level, from h1 to h6. Note that the first (leftmost) tab panel will be open by default in 'tab view', while all panels will be closed in 'accordion view' (ie. below the specified breakpoint).

    If you want a specific tab other than the first to be open by default then add the class 'responsive-tabs__panel--active' onto the panel, eg:

    <div class="responsive-tabs">
      <h2>[...]</h2>
      <div>[...]</div>
      <h2>[...]</h2>
      <div class="responsive-tabs__panel--active">[...]</div>
    </div>
    					
  5. On document ready, call the function RESPONSIVEUI.responsiveTabs() to create the tabs

Download

responsiveTabs.js is available for download on Github

Download from Github