Accordion Module Created in Pure JavaScript & CSS

Project:	Accordion
Author:	michu2k
Fork:	Fork on GitHub
License:	MIT

Live Preview

Download (174 KB)

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.

Version

3.3.4

Installation

npm

Install the package & import files

npm install accordion-js

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

<link rel="stylesheet" href="[CDN CSS URL]">
<script src="[CDN JS URL]"></script>

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.

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

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

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

Initialize the module

<script>
  new Accordion('.accordion-container');
</script>

API

Examples

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) {
    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.

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

Changelog

Version: v3.3.4
Release Date: 2023-03-19T17:27:04Z
Changes:
- Update .npmignore
Version: v3.3.3
Release Date: 2023-03-19T17:17:36Z
Changes:
- 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
Changes:
- Moved execution of beforeOpen fn before panel calculation
Version: v3.3.1
Release Date: 2022-08-06T09:43:42Z
Changes:
- 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
Changes:
- 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
Changes:
- Added .update() method
- Updated packages
Version: v3.1.1
Release Date: 2020-12-23T18:29:25Z
Changes:
- Fixed accordion icon state
Version: v3.1.0
Release Date: 2020-12-23T17:51:58Z
Changes:
- Support for nested accordions
Version: v3.0.0
Release Date: 2020-11-11T16:33:05Z
Changes:
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
Changes:
- Added `.attachEvents()` & `.detachEvents()` functions - #8 Thanks @northkode for the idea
- Core changes
- Updated packages
- Updated README.md
Version: v2.7.3
Release Date: 2019-07-31T18:06:08Z
Changes:
- Fixed module export
- Changed indent from 4 to 2 spaces
- Updated list of supported browsers
- Updated README.md
- Updated .gitignore
Version: v2.7.2
Release Date: 2019-05-10T13:25:47Z
Changes:
- 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
Changes:
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
Changes:
- 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
Changes:
- Added font shorthand in CSS
- Updated types of variables
Version: v2.6.3
Release Date: 2018-12-15T21:02:08Z
Changes:
- 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
Changes:
- Updated packages
- Added .browserslistrc file
- Fixed README.md
Version: v2.6.1
Release Date: 2018-11-23T22:39:10Z
Changes:
- Removed support for IE9
- code tweaks
Version: v2.6.0
Release Date: 2018-09-07T21:07:34Z
Changes:
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
Changes:
- You can open the list by pressing the Enter button
Version: v.2.5.0
Release Date: 2018-04-28T10:18:51Z
Changes:
- 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
Changes:
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
Changes:
- 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
Changes:
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
Changes:
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
Changes:
Script no longer require jQuery. You can now change classes through API
Version: v1.2.0
Release Date: 2017-08-02T18:04:44Z
Changes:
Changes:
- 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
Changes:
First version of the module has been published.