An accordion can be accessed using a CSS transition to expand and contract. Song statuses are added automatically. This plugin is a fully accessible, seamless animated accordion component that expands and collapses accordion panels using CSS3 transitions.
accessible accordion jquery, accordion javascript, accessible accordion css only, nested accordion accessibility, accordion accessibility wcag
How to make use of it:
1. Install & obtain.
# NPM $ npm install vanilla-js-accordion --save
2. Import the Accordion.js into the doc.
<link rel="stylesheet" href="accordion.css" /> <script src="accordion.js"></script>
3. Build the HTML to 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 choices.
var accordion = new Accordion('.Example');
5. The generated HTML markup must 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 strategies.
// 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();
Accessible Accordion With JavaScript And CSS3, accordion Plugin/Github
See Demo And Download
Official Website(TheC2Group): Click Here
This superior jQuery/javascript plugin is developed by TheC2Group. For extra Advanced Usages, please go to the official website.
Be First to Comment