Author: | TheC2Group |
---|---|
Views Total: | 521 views |
Official Page: | Go to website |
Last Update: | July 23, 2021 |
License: | MIT |
Preview:

Description:
A fully accessible and smoothly animated accordion component that expands and collapses accordion panels using CSS3 transitions.
The plugin automatically adds accessibility attributes to accordions following the WAI-ARIA practices.
How to use it:
1. Install & download.
# NPM $ npm install vanilla-js-accordion --save
2. Import the Accordion.js into the document.
<link rel="stylesheet" href="accordion.css" /> <script src="accordion.js"></script>
3. Build the HTML for your first accordion.
<div class="Accordion Example"> <div class="item" data-status="disabled"> <div class="target" tabindex="0">Title 1</div> <div class="panel"> Panel 1 </div> </div> <div class="item" data-status="disabled"> <div class="target" tabindex="0">Title 2</div> <div class="panel"> Panel 2 </div> </div> <div class="item" data-status="disabled"> <div class="target" tabindex="0">Title 3</div> <div class="panel"> Panel 3 </div> </div> </div>
4. Initialize the accordion with default options.
var accordion = new Accordion('.Example');
5. The generated HTML markup should be like these:
<div class="Accordion Example" role="tablist" aria-multiselectable="true"> <div class="item" data-status="expanded"> <div class="target" role="tab" aria-expanded="true" tabindex="0" id="Accordion-1-1">Title 1</div> <div class="panel" role="tabpanel" aria-hidden="false" aria-labelledby="Accordion-1-1"> Panel 1 </div> </div> <div class="item" data-status="contracted"> <div class="target" role="tab" aria-expanded="false" tabindex="0" id="Accordion-1-2">Title 2</div> <div class="panel" role="tabpanel" aria-hidden="true" aria-labelledby="Accordion-1-2"> Panel 2 </div> </div> <div class="item" data-status="contracted"> <div class="target" role="tab" aria-expanded="false" tabindex="0" id="Accordion-1-3">Title 3</div> <div class="panel" role="tabpanel" aria-hidden="true" aria-labelledby="Accordion-1-3"> Panel 3 </div> </div> </div>
6. Override the default settings to customize the accordion.
var accordion = new Accordion('.Example',{ // default selectors item: '.item', target: '.target', control: '.target', panel: '.panel', // allows multiple panels to open at a time allowMultiple: true, // default attribute attribute: 'data-status', // default values the data-status attribute expanded: 'expanded', contracted: 'contracted', // CSS prefix prefix: 'Accordion-', // config the CSS transitions here transition: 'height .3s', // auto set focus to the accordion // none, item, panel, target, control, first setFocus: 'none', // enable URL hash hashEnabled: true });
7. API methods.
// toggle an accordion panel accordion.activate(index); // expand an accordion panel accordion.expand(index); // collapse an accordion panel accordion.contract(index); // collapse all accordion panels accordion.contractAll(index); // destroy the accordion instance accordion.destroy();
Changelog:
v1.1.3 (07/23/2020)
- update
v1.1.2 (08/01/2020)
- fixing accordion close animation to be smooth