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

Category: Accordion , Javascript , Recommended | December 24, 2019
Author: michu2k
Views Total: 3,544 views
Official Page: Go to website
Last Update: December 24, 2019
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, 

    // 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();

// attach/detach events
accordion.attachEvents(); 
accordion.detachEvents();

Changelog:

v3.0.0 (11/12/2019)

  • 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