jQuery Plugin For Responsive jQuery UI Accordion & Tabs

A super simple jQuery plugin for transforming a standard jQuery UI tabs widget into an accordion widget when it reaches a breakpoint specified in CSS3 media queries. Suitable for displaying your jQuery UI tabs and accordion widgets responsively across different screen sizes.

How to use it:

1. Makes sure you have jQuery and jQuery UI installed in your html page.

<link rel="stylesheet" href="/path/to/jquery-ui.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Include the JavaScript file jquery.responsive-accordion-tabs.min.js after jQuery library but before the closing body tag.

<script src="js/jquery.responsive-accordion-tabs.min.js"></script>

3. Create a jQuery UI tabs widget as follows.

<div class="accordion-tabs">
  <ul class="accordion-tab-headings">
    <li><a href="#section-1">Heading 1</a></li>
    <li><a href="#section-2">Heading 2</a></li>
    <li><a href="#section-3">Heading 3</a></li>
  </ul>

  <div class="accordion-tab-content">
    <section id="section-1">
      <h3>Heading 1</h3>
      <div><p>Content 1</p></div>
    </section>

    <section id="section-2">
      <h3>Heading 2</h3>
      <div><p>Content 2</p></div>
    </section>

    <section id="section-3">
      <h3>Heading 3</h3>
      <div><p>Content 3</p></div>
    </section>
  </div>
</div>

4. Initialize the plugin and specify the CSS breakpoint in the mediaQuery option.

$('.accordion-tabs').accordionTabs({
  mediaQuery: '(min-width: 40em)'
  }, 

  {
    // jQuery UI Accordion options
    header: 'h3', // Specify the heading level you used (required)
    heightStyle: 'content'
  }, 

  {
    // jQuery UI Tabs options 
    show: {
      effect: 'fade'
    }
  }
);

---

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