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.
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" > |
07 |
< div class = "accordion-group__accordion-collapse" > |
08 |
< div class = "accordion-group__accordion-content" > |
09 |
< p >Accordion Content 1</ p > |
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 > |
19 |
< div class = "accordion-group__accordion-collapse" > |
20 |
< div class = "accordion-group__accordion-content" > |
21 |
< p >Accordion Content 2</ p > |
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 > |
31 |
< div class = "accordion-group__accordion-collapse" > |
32 |
< div class = "accordion-group__accordion-content" > |
33 |
< p >Accordion Content 3</ p > |
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 |
5. Only one accordion panel could be expanded at a time.
1 |
$( '#accordion-group-demo' ).ariaAccordion({ |
6. Config the animation speed.
1 |
$( '#accordion-group-demo' ).ariaAccordion({ |
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' , |
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 , |
Changelog:
2018-09-09
- v2: expand accordions on init
2018-09-09
2018-02-24
This awesome jQuery plugin is developed by DavideTriso. For more Advanced Usages, please check the demo page or visit the official website.