Responsive Tabs

Responsive tabs are a type of web design element that allows you to present content in a tabbed interface that adjusts to the size of the screen it is being displayed on. When the screen is wider, the tabs may be displayed horizontally, while on smaller screens they may be displayed vertically to save space. The goal of responsive tabs is to provide an optimal viewing experience for users by adapting the layout of the tabs to the size of the device or screen.

• Progressive enhancement - uses semantic heading/content markup - tabs and accordion are created entirely with jQuery
• Uses Aria attributes and roles to aid screen reader accessibility
• Tabs and their content are fully accessible via keyboard
• Supports multiple sets of tabs on same page

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="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="tabs">
     <h2>[...]</h2>
     <div>[...]</div>
     <h2>[...]</h2>
     <div class="responsive-tabs__panel--active">[...]</div>
   </div>
   					

5. On document ready, call the function responsiveTabs()

responsiveTabs.js is available for download on Github - Petelove

Or Download from HTML CSS Coding