Accessible Cross-browser Accordion Plugin For jQuery - QuickAccord
File Size: | 9.26 KB |
---|---|
Views Total: | 3212 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
QuickAccord is a simple, accessible, cross-browser jQuery accordion plugin which allows to show / hide sectioned content using CSS3 transitions.
How to use it:
1. Add accordion triggers and content panels to the webpage as follow:
<ul> <li> <a href="#accordion1" class="accordion-trigger" data-accord-group="group1">Accordion 1</a> <div id="accordion1" class="accordion-content collapsed"> <p>Content 1</p> </div> </li> <li> <a href="#accordion2" class="accordion-trigger" data-accord-group="group1">Accordion 2</a> <div id="accordion2" class="accordion-content collapsed"> <p>Content 2</p> </div> </li> <li> <a href="#accordion3" class="accordion-trigger" data-accord-group="group1">Accordion 3</a> <div id="accordion3" class="accordion-content collapsed"> <p>Content 3</p> </div> </li> </ul>
2. The basic CSS for the accordion. Override or modify the styles as shown below and then insert them into your existing CSS file.
ul { list-style: none; } li { margin: 16px 0; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border: 3px solid #D0D0D0; } a { font-weight: bold; text-transform: uppercase; color: #FF3311; text-decoration: none; } .accordion-trigger { background-color: #D0D0D0; display: block; padding: 24px; position: relative; } .accordion-trigger:after { display: block; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 2em; } .accordion-trigger.expanded:after { content: "-"; } .accordion-trigger.collapsed:after { content: "+"; } .accordion-content { overflow: hidden; -webkit-transition: height 0.25s; -moz-transition: height 0.25s; transition: height 0.25s; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .accordion-content.expanded { height: auto; } .accordion-content.collapsed { height: 0; } .accordion-content p { padding: 16px; }
3. Put jQuery library and the QuickAccord's script at the bottom of the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="js/QuickAccord.js"></script>
4. Call the function QuickAccord()
on the accordion triggers and done.
$(".accordion-trigger").QuickAccord();
5. API methods.
var myAccordion = $(".accordion-trigger").QuickAccord(); // destroy the accordion qa.QuickAccord.destroy(); // toggle the accordion content myAccordion.QuickAccord.toggle(); // close the accordion content myAccordion.QuickAccord.collapse(); // open the accordion content myAccordion.QuickAccord.expand(); // Returns true if the accordion content is expanded myAccordion.QuickAccord.isExpanded();
This awesome jQuery plugin is developed by koga73. For more Advanced Usages, please check the demo page or visit the official website.