Accessible Accordion Plugin aria accordion - Download Easy Accessible Accordion Plugin For jQuery - aria-accordion

Download Easy Accessible Accordion Plugin For jQuery – aria-accordion

Posted on

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

Accessible Accordion Plugin aria accordion - Download Easy Accessible Accordion Plugin For jQuery - aria-accordion
File Size: 77.8 KB
Views Total: 4579
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

aria-accordion is a lightweight jQuery plugin which helps you create customizable, accessible accordions with support for auto focus, fade animation, Aria attributes/roles and keyboard interactions.

How to use it:

1. Add references to jQuery library and the aria-accordion plugin’s files to the webpage.

1 <link rel="stylesheet" href="aria-accordion.css">
2 <script src="/path/to/jquery.min.js"></script>
3 <script src="aria-accordion.js"></script>

2. Create the HTML for the accordion interface:

01 <section class="accordion-group" id="accordion-group-demo">
02   <div class="accordion-group__accordion">
03     <header class="accordion-group__accordion-head">
04       <h3 class="accordion-group__accordion-heading">
05         <button type="button" class="accordion-group__accordion-btn"><a href="https://www.jqueryscript.net/accordion/">Accordion</a> 1</button></h3>
06     </header>
07     <div class="accordion-group__accordion-collapse">
08       <div class="accordion-group__accordion-content">
09         <p>Accordion Content 1</p>
10       </div>
11     </div>
12   </div>
13   <div class="accordion-group__accordion">
14     <header class="accordion-group__accordion-head">
15       <h3 class="accordion-group__accordion-heading">
16         <button type="button" class="accordion-group__accordion-btn">Accordion 2</button>
17       </h3>
18     </header>
19     <div class="accordion-group__accordion-collapse">
20       <div class="accordion-group__accordion-content">
21         <p>Accordion Content 2</p>
22       </div>
23     </div>
24   </div>
25   <div class="accordion-group__accordion">
26     <header class="accordion-group__accordion-head">
27       <h3 class="accordion-group__accordion-heading">
28         <button type="button" class="accordion-group__accordion-btn">Accordion 3</button>
29       </h3>
30     </header>
31     <div class="accordion-group__accordion-collapse">
32       <div class="accordion-group__accordion-content">
33         <p>Accordion Content 3</p>
34       </div>
35     </div>
36   </div>
37 </section>

3. Call the plugin to create a default accessible accordion.

1 $('#accordion-group-demo').ariaAccordion();

4. Collapse all accordion panels on page load.

1 $('#accordion-group-demo').ariaAccordion({
2   expandOnPageLoad: false
3 });

5. Only one accordion panel could be expanded at a time.

1 $('#accordion-group-demo').ariaAccordion({
2   expandOnlyOne: true
3 });

6. Config the animation speed.

1 $('#accordion-group-demo').ariaAccordion({
2   fadeSpeed: 300
3 });

7. All default configuration options.

01 $('#accordion-group-demo').ariaAccordion({
02   accGroupIdPrefix: 'accordion-group--',
03   accClass: 'accordion-group__accordion',
04   headingClass: 'accordion-group__accordion-heading',
05   btnClass: 'accordion-group__accordion-btn',
06   panelClass: 'accordion-group__accordion-panel',
07   contentClass: 'accordion-group__accordion-content',
08   contentRole: 'document',
09   slideSpeed: 300,
10   easing: 'swing',
11   cssTransitions: false,
12   expandedClass: 'accordion-group__accordion_expanded',
13   btnExpandedClass: 'accordion-group__accordion-btn_expanded',
14   panelExpandedClass: 'accordion-group__accordion-panel_expanded',
15   expandOnPageLoad: true,
16   expandOnlyOne: false,
17   keyboard<a href="https://www.jqueryscript.net/tags.php?/Navigation/">Navigation</a>: true
18 });

Changelog:

2018-09-09

  • v2: expand accordions on init

2018-09-09

  • v1.5.1

2018-02-24

  • v1.5

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

source : jquery.net