Simple Plain Accordion Interface In Pure JS/CSS – Accordion.js

Preview:

Description:

A pure JavaScript/CSS solution to help you create a vertical, configurable, smooth sliding accordion interface from plain html structure.

How to use it:

Install and import the Accordion.js as a module.

# NPM
$ npm install accordion-js --save

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

Or import the Accordion’s JavaScript and Stylesheet using tags.

<link rel="stylesheet" href="dist/accordion.min.css">
<script src="dist/accordion.min.js"></script>

The basic html structure for the accordion.

<div class="accordion-container">
  <div class="ac">
    <h2 class="ac-header">
      <button class="ac-trigger">Trigger 1</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Content 1</p>
    </div>
  </div>
  <div class="ac">
    <h2 class="ac-header">
      <button class="ac-trigger">Trigger 2</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Content 2</p>
    </div>
  </div>
  <div class="ac">
    <h2 class="ac-header">
      <button class="ac-trigger">Trigger 3</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Content 3</p>
    </div>
  </div>
</div>

Initialize the accordion on the top container and done.

var accordion = new Accordion('.accordion-container');

Options and defaults. Pass the following options object as the second parameter to the Accordion method.

var accordion = new Accordion('.accordion-container', {
    // animation duration in ms {number} 
    duration: 600, 
    // add ARIA elements to the HTML structure {boolean}
    ariaEnabled: true, 
    // allow collapse expanded panel {boolean}
    collapse: true, 
    // show multiple elements at the same time {boolean}
    showMultiple: false, 
    // disabling this option will find all items in the container {boolean}
    onlyChildNodes: true, 
    // show accordion elements during initialization {array}
    openOnInit: [], 
    // element class {string}
    elementClass: 'ac', 
    // trigger class {string}
    triggerClass: 'ac-trigger', 
    // panel class {string}
    panelClass: 'ac-panel', 
    // active element class {string}
    activeClass: 'is-active'
    
});

Callback functions.

var accordion = new Accordion('.accordion-container', {
    // calls before the item is opened {function}
    beforeOpen: function beforeOpen() {}, 
    // calls when the item is opened {function}
    onOpen: function onOpen() {}, 
    // calls before the item is closed {function}
    beforeClose: function beforeClose() {}, 
    // calls when the item is closed {function}
    onClose: function onClose() {}, 
});

API methods.

// open an accordion panel
accordion.open(index);
// close an accordion panel
accordion.close(index);
// toggle an accordion panel
accordion.toggle(index);
// open all accordion panels
accordion.openAll();
// close all accordion panels
accordion.closeAll();
// destroy the instance
accordion.destroy();
// update
accordion.update();
// attach/detach events
accordion.attachEvents(); 
accordion.detachEvents();

Changelog:

v3.3.4 (03/19/2023)

• 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

v3.3.2 (08/15/2022)

• Moved execution of beforeOpen fn before panel calculation

v3.3.1 (08/06/2022)

• 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

v3.3.0 (04/30/2022)

• 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

v3.2.0 (03/19/2022)

• Added .update() method
• Updated packages

v3.1.0 (11/12/2020)

• Fixed accordion icon state

v3.0.0 (11/12/2019)

• 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
• Removed itemNumber option
• Removed showItem option
• Removed onToggle option
• Removed targetClass option
• Remove IE support

v2.8.0 (10/13/2019)

• Added attach/detachEvents functions
• Core changes

09/05/2019

• Updated documentation. Thanks to Rafa Chacón.

v2.7.3 (08/01/2019)

• Fixed module export
• Changed indent from 4 to 2 spaces

v2.7.2 (05/10/2019)

• Changed option name from callFunction to onToggle
• Changed active accordion element class to ‘is-active’
• Updated package.json
• Various fixes

v2.7.1 (04/04/2019)

• Fixed a bug, where the accordion was hidden when Javascript was turned off

v2.7.0 (04/04/2019)

• Added possibility to create several accordions with the same options by passing an array with selectors
• Updated packages
• Updated gulpfile.js
• Fixed a bug, where the accordion was hidden when Javascript was turned off
• Deleted .babelrc file

02/01/2019

• v2.6.4

09/08/2018

• v2.6.0

05/27/2018

• v2.5.1