# Accordion 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. ## Version 3.3.4 ## Installation ###### npm Install the package & import files ``` npm install accordion-js ``` ```javascript import Accordion from 'accordion-js'; import 'accordion-js/dist/accordion.min.css'; ``` ###### CDN Include files using CDN. ``` https://unpkg.com/accordion-js@3.3.4/dist/accordion.min.css https://unpkg.com/accordion-js@3.3.4/dist/accordion.min.js ``` ```html ``` ###### Github You can also download files from Github and attach them manually to your project.
Note: On production use files (JS and CSS) only from **dist/** folder. ## Usage ###### Include files See the section above. ###### Create HTML layout This is just an example of a layout. You can create your own HTML structure. ```html

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

``` ###### Initialize the module ```html ``` ## API ###### Examples new Accordion(container, options) * `container` - string | HTMLElement (required), selector of accordion container * `options` - object (optional), accordion options ```javascript // Default options new Accordion('.container-first'); // User options new Accordion('.container-second', { duration: 400, showMultiple: true, onOpen: function(currentElement) { console.log(currentElement); } }); // Define several accordions with the same options (pass an array with selectors) new Accordion(['.container-first', '.container-second'], {}); // or pass an array with HTMLElements const accordions = Array.from(document.querySelectorAll('.accordion-container')); new Accordion(accordions, {}); // Detach events const accordion = new Accordion('.container-first'); accordion.detachEvents(); ``` ###### Options | Option | Type | Default value | Description | | ----- | ----- | ----- | ----- | | duration | number | 600 | 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 to `false` 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) => {}`| ###### Methods | 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 | - | ## v3 Release Info There have been a lot of changes to the API in version `3.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.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

	Stars	Issues	Version	Updated	Created
accordion-js	340	0	3.3.4	a year ago	7 years ago
react-collapsible	543	31	2.10.0	2 years ago	9 years ago
react-light-accordion	10	2	0.1.4	6 years ago	6 years ago
react-sanfona	242	37	1.5.0	4 years ago	9 years ago

accordion-js vs react-collapsible vs react-light-accordion vs react-sanfona

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past