Lightweight and accessible accordion module with an extensible API. With the module you can create accordion on your website, useful especially for creating FAQ lists.
3.4.0
Install the package & import files
importAccordionfrom"accordion-js";import"accordion-js/dist/accordion.min.css";
Include files using CDN.
https://unpkg.com/accordion-js@3.4.0/dist/accordion.min.csshttps://unpkg.com/accordion-js@3.4.0/dist/accordion.min.js
<linkrel="stylesheet"href="[CDN CSS URL]"/><scriptsrc="[CDN JS URL]"></script>
You can also download files from Github and attach them manually to your project.
Note: On production use files (JS and CSS) only fromdist/ folder.
See the section above.
This is just an example of a layout. You can create your own HTML structure.
<divclass="accordion-container"><divclass="ac"><h2class="ac-header"><buttontype="button"class="ac-trigger">Lorem ipsum dolor sit amet.</button></h2><divclass="ac-panel"><pclass="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><divclass="ac"><h2class="ac-header"><buttontype="button"class="ac-trigger">Lorem ipsum dolor sit amet.</button></h2><divclass="ac-panel"><pclass="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><divclass="ac"><h2class="ac-header"><buttontype="button"class="ac-trigger">Lorem ipsum dolor sit amet.</button></h2><divclass="ac-panel"><pclass="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div>
<script>newAccordion(".accordion-container");</script>new Accordion(container, options)
container - string | HTMLElement (required), selector of accordion containeroptions - object (optional), accordion options
// Default optionsnewAccordion(".container-first");// User optionsnewAccordion(".container-second",{duration:400,showMultiple:true,onOpen:function(currentElement){console.log(currentElement);}});// Define several accordions with the same options (pass an array with selectors)newAccordion([".container-first",".container-second"],{});// or pass an array with HTMLElementsconstaccordions=Array.from(document.querySelectorAll(".accordion-container"));newAccordion(accordions,{});// Detach eventsconstaccordion=newAccordion(".container-first");accordion.detachEvents();| Option | Type | Default value | Description |
|---|
| duration | number | 500 | Animation duration in ms |
| ariaEnabled | boolean | true | Add ARIA elements to the HTML structure |
| collapse | boolean | true | Allow collapse expanded panel |
| showMultiple | boolean | false | Show multiple elements at the same time |
| onlyChildNodes | boolean | true | Disabling this option will find all items in the container. Warning: Setting tofalse will break the functionality of nested accordions |
| openOnInit | array | [] | Show accordion elements during initialization |
| elementClass | string | "ac" | Element class |
| triggerClass | string | "ac-trigger" | Trigger class |
| panelClass | string | "ac-panel" | Panel class |
| activeClass | string | "is-active" | Active element class |
| beforeOpen | function | - | Calls before the item is opened.
beforeOpen: (currElement) => {} |
| onOpen | function | - | Calls when the item is opened.
onOpen: (currElement) => {} |
| beforeClose | function | - | Calls before the item is closed.
beforeClose: (currElement) => {} |
| onClose | function | - | Calls when the item is closed.
onClose: (currElement) => {} |
| Option | Description | Arguments |
|---|
| attachEvents() | Attach events | - |
| detachEvents() | Detach events | - |
| open() | Open the accordion element with the given idx
E.g.acc.open(1) | idx - element index |
| close() | Close the accordion element with the given idx
E.g.acc.close(1) | idx - element index |
| toggle() | Toggle the accordion element with the given idx
E.g.acc.toggle(1) | idx - element index |
| openAll() | Open all accordion elements (without animation) | - |
| closeAll() | Close all accordion elements (without animation) | - |
| update() | If there are new items added by lazy load, you can run this method to update the Accordion | - |
| destroy() | Destroy accordion instance:
Open elements, remove events, IDs & ARIA | - |
There have been a lot of changes to the API in version3.0.0, so if you are using previous versions of the accordion (2.8.0 and below), I recommend updating the package to the latest version with new structure and options.
This project is under the MIT license.