This time I will share jQuery Plugin and tutorial about Simple Accessible Accordion In Vanilla JS – A11y-Accordion, hope it will help you in programming stack.
A11y-Accordion is a progressive enhancement JQuery Vanilla JavaScript plugin that adds keyboard navigation and WAI-ARIA roles to your accordion to make it more accessible for keyboard and screen reader users.
Lightweight, simple-to-use, and easy to customize via data attributes, without any JS call.
How to use it:
1. Download and load the A11y-Accordion’s JavaScript and CSS files in the HTML file.
1 |
<link rel="stylesheet" href="css/aria.accordion.css" /> |
2 |
<script src="js/aria.accordion.min.js"></script> |
2. Add the tabs and panels to the accordion using the following data attributes:
- data-aria-accordion: accordion container
- data-transition: applies CSS transitions to accordion panels
- data-multi: allows to open multiple panels
- data-default: shows a panel on page load
- data-constant: makes this panel always be opened
01 |
<div data-aria-accordion |
07 |
<h3 data-aria-accordion-heading> |
10 |
<div data-aria-accordion-panel> |
12 |
Here is the first panel of content. |
15 |
This particular accordion example can have multiple opened panels at a time, or every panel closed. |
19 |
<h3 data-aria-accordion-heading> |
22 |
<div data-aria-accordion-panel> |
24 |
By using the <code>data-multi</code> attribute, multiple |
25 |
panels can be opened at once. |
29 |
<h3 data-aria-accordion-heading> |
32 |
<div data-aria-accordion-panel> |
34 |
The <code>data-default="none"</code> attribute is used to |
35 |
indicate that no panel will be open by default, when the |
36 |
accordion is initially rendered. |
Changelog:
2020-02-11
- Now the plugin works with vanilla JavaScript
- Doc updated
2016-05-03
This awesome jQuery plugin is developed by scottaohara. For more Advanced Usages, please check the demo page or visit the official website.
