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

Category: Accordion , Javascript , Recommended | March 19, 2023
Author:michu2k
Views Total:688 views
Official Page:Go to website
Last Update:March 19, 2023
License:MIT

Preview:

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

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

You Might Be Interested In:


2 thoughts on “Simple Plain Accordion Interface In Pure JS/CSS – Accordion.js

  1. Athar Husain

    How to fix this error.

    accordion.min.js:9 Uncaught TypeError: Cannot read property ‘querySelectorAll’ of null
    at Object.init (accordion.min.js:9)
    at new o (accordion.min.js:9)
    at getemail:787

    Reply
  2. Rafa Chacón

    The documentation is a bit obsolete, I guess.

    To solve this issue, just add the main selector to the Accordion constructor:


    const userOptions = {}; // your options object.
    new Accordion('.ac-container', userOptions);

    Note that ac-container is the class of the main container of all accordions in the page. Don’t forget to include the dot.

    Reply

Leave a Reply