Accordion Module Created in Pure JavaScript & CSS

Accordion Module Created in Pure JavaScript & CSS
Project: Accordion
Author: michu2k
Fork: Fork on GitHub
License: MIT

Lightweight and accessible accordion module with an extensible API. With the module, you can create an accordion on your website, useful especially for creating FAQ lists.





Install the package & import files

npm install accordion-js
import Accordion from 'accordion-js';
import 'accordion-js/dist/accordion.min.css';

Include files using CDN.
<link rel="stylesheet" href="[CDN CSS URL]">
<script src="[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 from dist/ folder.


Include files

See the section above.

Create HTML layout

This is just an example of a layout. You can create your own HTML structure.

<div class="accordion-container">
  <div class="ac">
    <h2 class="ac-header">
      <button type="button" class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <div class="ac">
    <h2 class="ac-header">
      <button type="button" class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <div class="ac">
    <h2 class="ac-header">
      <button type="button" class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Initialize the module
  new Accordion('.accordion-container');



new Accordion(container, options)

  • container – string | HTMLElement (required), selector of accordion container
  • options – object (optional), accordion options
// Default options
new Accordion('.container-first');

// User options
new Accordion('.container-second', {
  duration: 400,
  showMultiple: true,
  onOpen: function(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');
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) => {}
Option Description Arguments
attachEvents() Attach events
detachEvents() Detach events
open() Open the accordion element with the given idx
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.

  • .eslintignore
  • .eslintrc
  • .gitignore
  • .npmignore
  • dist
  • gulpfile.js
  • header.txt
  • index.html
  • package-lock.json
  • package.json
  • src


  • Version: v3.3.4
    Release Date: 2023-03-19T17:27:04Z

    - Update .npmignore

  • Version: v3.3.3
    Release Date: 2023-03-19T17:17:36Z

    - Adjusted styles
    - Fixed a bug when defined IDs were overwritten
    - Fixed a bug when currFocusedIdx wasn't set correctly
    - Fixed a bug with transition event fired too often
    - Replaced deprecated keyCode event
    - Escape class names in selectors
    - ESLint: Enable `no-unused-vars` rule
    - pkg.json: Changed min Edge version to 80

  • Version: v3.3.2
    Release Date: 2022-08-15T09:21:50Z

    - Moved execution of beforeOpen fn before panel calculation

  • Version: v3.3.1
    Release Date: 2022-08-06T09:43:42Z

    - Fixed a bug when updateARIA wasn't fired when the closeAll function was called
    - `openAll` and `closeAll` will only work on open/close elements, added missing onClose & onOpen calls

  • Version: v3.3.0
    Release Date: 2022-04-30T11:53:33Z

    - Added `onlyChildNodes` option
    - Fixed a bug with incorrect visiblity when `openOnInit` was set to `0` and more elements were loaded.
    - Added additional packages and settings to the gulp config

  • Version: v3.2.0
    Release Date: 2022-03-19T11:41:40Z

    - Added .update() method
    - Updated packages

  • Version: v3.1.1
    Release Date: 2020-12-23T18:29:25Z

    - Fixed accordion icon state

  • Version: v3.1.0
    Release Date: 2020-12-23T17:51:58Z

    - Support for nested accordions

  • Version: v3.0.0
    Release Date: 2020-11-11T16:33:05Z

    The new major Accordion update is here! :fire:
    Many new options have been added and the core has been updated to meet the new accessibility standards.

    - Refactoring & Optimization
    - Added keydown handlers (space, arrowUp, arrowDown, home, end)
    - Added openOnInit option,
    - Added collapse option
    - Added activeClass option
    - Added beforeOpen option
    - Added onOpen option
    - Added beforeClose option
    - Added onClose option
    - Added open method
    - Added close method
    - Added toggle method
    - Added openAll method
    - Added closeAll method
    - Added toggle method
    - Added destroy method
    - Updated HTML structure
    - Updated CSS classes
    - Updated ARIA
    - Renamed options:
    - questionClass => triggerClass
    - answerClass => panelClass
    - closeOthers => showMultiple
    - aria => ariaEnabled
    - Removed itemNumber option
    - Removed showItem option
    - Removed onToggle option
    - Removed targetClass option
    - Removed IE support :cry:

  • Version: v2.8.0
    Release Date: 2019-10-12T19:30:29Z

    - Added `.attachEvents()` & `.detachEvents()` functions - #8 Thanks @northkode for the idea
    - Core changes
    - Updated packages
    - Updated

  • Version: v2.7.3
    Release Date: 2019-07-31T18:06:08Z

    - Fixed module export
    - Changed indent from 4 to 2 spaces
    - Updated list of supported browsers
    - Updated
    - Updated .gitignore

  • Version: v2.7.2
    Release Date: 2019-05-10T13:25:47Z

    - Changed option name from callFunction to **onToggle**
    - Changed active accordion element class to 'is-active'
    - Updated package.json
    - Various fixes

  • Version: v2.7.1
    Release Date: 2019-04-04T09:16:24Z

    Small fix for yesterday's update
    - Added comments to the .scss file
    - Fixed a bug, where the accordion was hidden when Javascript was turned off

  • Version: v2.7.0
    Release Date: 2019-04-03T19:47:20Z

    - Added possibility to create several accordions with the same options by passing an array with selectors #7
    - Updated packages
    - Updated gulpfile.js
    - Deleted .babelrc file

  • Version: v2.6.4
    Release Date: 2019-02-01T00:34:31Z

    - Added font shorthand in CSS
    - Updated types of variables

  • Version: v2.6.3
    Release Date: 2018-12-15T21:02:08Z

    - Added error handling for javascript in gulpfile.js
    - Added new option `callfunction`, can take 2 params (current, all)
    - **current** - element that was clicked
    - **all** - list of all accordion elements
    - Fixed a bug, where links inside the panel were tabbable, when the panel was closed (Issue #6)

  • Version: v2.6.2
    Release Date: 2018-11-28T21:31:40Z

    - Updated packages
    - Added .browserslistrc file
    - Fixed

  • Version: v2.6.1
    Release Date: 2018-11-23T22:39:10Z

    - Removed support for IE9
    - code tweaks

  • Version: v2.6.0
    Release Date: 2018-09-07T21:07:34Z

    In this patch i fixed some critical bugs, that's why i decided to publish version 2.6.0 instead of 2.5.2.
    - Added gulpfile.js
    - Fixed a bug, where the element couldn't have more than one class
    - Fixed a bug, where it wasn't possible to create few lists with specific options
    - Code refactoring

  • Version: v.2.5.1
    Release Date: 2018-05-26T15:03:52Z

    - You can open the list by pressing the Enter button

  • Version: v.2.5.0
    Release Date: 2018-04-28T10:18:51Z

    - Added unique ID to each accordion element `ac-{number}`
    - Added `aria` option. When set to true, ARIA elements are added to the HTML structure
    - Changed HTML structure
    - Code refactoring

  • Version: v.2.4.0
    Release Date: 2018-03-05T17:52:31Z

    In today's update, I've reworked an accordion animation. Now is working smoother and better than before.

    - Animation has been reworked
    - Changed comments
    - Some fixes in code

  • Version: v.2.3.0
    Release Date: 2018-02-11T16:21:38Z

    - Changed option name from `elClass` to `elementClass`
    - Changed option name from `qClass` to `questionClass`
    - Changed option name from `aClass` to `answerClass`
    - Changed option name from `showFirst` to `showItem`
    - Added `itemNumber` option. It's working together with `showItem` option. Now you can show any element instead of just the first one. NOTICE: The first element has number 0.
    - Some comments changed

  • Version: v.2.2.1
    Release Date: 2017-10-24T18:37:35Z

    1. Now you can install module by npm
    2. Support some old browsers by using babel

  • Version: v.2.1.1
    Release Date: 2017-09-01T18:59:11Z

    Some little changes in this version:
    - New module init, now you must define container for accordion
    - You can set more than one accordion per page with different options
    - Some fixes in code

  • Version: v.2.0.0
    Release Date: 2017-08-17T11:35:41Z

    Script no longer require jQuery. You can now change classes through API

  • Version: v1.2.0
    Release Date: 2017-08-02T18:04:44Z

    - Now you can create lists independent of each other
    - New option: showFirst [boolean], when is set to true, then first element in list is open.
    - Code refactoring

  • Version: v1.0
    Release Date: 2017-05-01T12:16:56Z

    First version of the module has been published.

Leave a Reply

Leave a Comment


No comments yet. Why don’t you start the discussion?

Leave a Reply

Scroll to Top