Dynamic Responsive Tabs / Accordion Plugin For jQuery

Just another responsive jQuery tabs plugin which automatically converts between a tabs interface and an accordion interface based on the screen size. With support for HTML5 hashchange event. Works on most popular platforms like desktop, iOS, Android, iPad and much more.

Basic usage:

1. Load the required stylesheet in the document's head section. You can override or modify the CSS rules in the jquery.atAccordionOrTabs.css to create your own tabs / accordion styles.

<link href="jquery.atAccordionOrTabs.css" rel="stylesheet">

2. Load jQuery library and the jquery.atAccordionOrTabs.js at the end of the document.

<script src="jquery.atAccordionOrTabs.js"></script>

3. Load the jQuery BBQ plugin after jQuery library that provides the support of bookmarkable #hash history.

<script src="jquery.bbq.js"></script>

4. Create a tabbed interface from an html unordered list like this:

<ul class="demo">
  <li><a>Tab One</a>
    <section>
      <p>Content 1</p>
    </section>
  </li>
  <li><a>Tab Two</a>
    <section>
      <p>Content 2</p>
     </section>
  </li>
  <li><a>Tab Three</a>
    <section>
      <p>Content 3</p>  
    </section>
  </li>
  <li><a>Tab Four</a>
    <section>
      <p>Content 4</p>
    </section>
  </li>
</ul>

5. Call the function on the html list and we're done.

$('.demo').accordionortabs();

6. Customization options with default values.

// default tab
defaultOpened: 0,

// allows a user to force the vertical mode at a certain pixel width of its container, 
// in the case when a table may technically fit but you'd prefer the vertical mode
containerBreakPoint: 0, 

tabsIfPossible: true,
hashbangPrefix: 'tabset_',
centerTabs: false

Changelog:

2020-01-14

• Accessibility and Bug Fixes

2016-03-29

• Made fix_accordion_or_tabs function global in case you ever need to

---

This awesome jQuery plugin is developed by stazna01. For more Advanced Usages, please check the demo page or visit the official website.