Accessible Cross browser Accordion Plugin For jQuery QuickAccord - Download Accessible Cross-browser Accordion Plugin For jQuery - QuickAccord

Download Accessible Cross-browser Accordion Plugin For jQuery – QuickAccord

By Posted on

This time I will share jQuery Plugin and tutorial about Accessible Cross-browser Accordion Plugin For jQuery – QuickAccord, hope it will help you in programming stack.

Accessible Cross browser Accordion Plugin For jQuery QuickAccord - Download Accessible Cross-browser Accordion Plugin For jQuery - QuickAccord
File Size: 9.26 KB
Views Total: 2921
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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:

view source
01 <ul>
02   <li>
03     <a href="#accordion1" class="accordion-trigger" data-accord-group="group1"><a href="https://www.jqueryscript.net/accordion/">Accordion</a> 1</a>
04     <div id="accordion1" class="accordion-content collapsed">
05       <p>Content 1</p>
06     </div>
07   </li>
08   <li>
09     <a href="#accordion2" class="accordion-trigger" data-accord-group="group1">Accordion 2</a>
10     <div id="accordion2" class="accordion-content collapsed">
11       <p>Content 2</p>
12     </div>
13   </li>
14   <li>
15     <a href="#accordion3" class="accordion-trigger" data-accord-group="group1">Accordion 3</a>
16     <div id="accordion3" class="accordion-content collapsed">
17       <p>Content 3</p>
18     </div>
19   </li>
20 </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.

view source
01 ul { list-style: none; }
02  
03 li {
04   margin: 16px 0;
05   -webkit-border-radius: 8px;
06   -moz-border-radius: 8px;
07   border-radius: 8px;
08   border: 3px solid #D0D0D0;
09 }
10  
11 a {
12   font-weight: bold;
13   text-transform: uppercase;
14   color: #FF3311;
15   text-decoration: none;
16 }
17  
18 .accordion-trigger {
19   background-color: #D0D0D0;
20   display: block;
21   padding: 24px;
22   position: relative;
23 }
24  
25 .accordion-trigger:after {
26   display: block;
27   position: absolute;
28   right: 16px;
29   top: 50%;
30   transform: translateY(-50%);
31   font-size: 2em;
32 }
33  
34 .accordion-trigger.expanded:after { content: "-"; }
35  
36 .accordion-trigger.collapsed:after { content: "+"; }
37  
38 .accordion-content {
39   overflow: hidden;
40   -webkit-transition: height 0.25s;
41   -moz-transition: height 0.25s;
42   transition: height 0.25s;
43   box-sizing: border-box;
44   -moz-box-sizing: border-box;
45   -webkit-box-sizing: border-box;
46 }
47  
48 .accordion-content.expanded { height: auto; }
49  
50 .accordion-content.collapsed { height: 0; }
51  
52 .accordion-content p { padding: 16px; }

3. Put jQuery library and the QuickAccord’s script at the bottom of the webpage.

view source
1 <script src="//code.jquery.com/jquery.min.js"></script>
2 <script src="js/QuickAccord.js"></script>

4. Call the function QuickAccord() on the accordion triggers and done.

view source
1 $(".accordion-trigger").QuickAccord();

5. API methods.

view source
01 var myAccordion = $(".accordion-trigger").QuickAccord();
02  
03 // destroy the accordion
04 qa.QuickAccord.destroy();
05  
06 // toggle the accordion content
07 myAccordion.QuickAccord.toggle();
08  
09 // close the accordion content
10 myAccordion.QuickAccord.collapse();
11  
12 // open the accordion content
13 myAccordion.QuickAccord.expand();
14  
15 // Returns true if the accordion content is expanded
16 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.

source : jqueryscript.net

Related posts: