jQuery Plugin For Responsive jQuery UI Accordion & Tabs
File Size: | 10.2 KB |
---|---|
Views Total: | 6114 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.