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

Category: Accordion , Javascript | October 13, 2019
Author: michu2k
Views Total: 4,322
Official Page: Go to website
Last Update: October 13, 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="css/accordion.css">
<script src="js/accordion.min.js"></script>

The basic html structure for the accordion.

<div class="ac-container">
  <div class="ac">
    <a href="#" class="ac-q">Lorem ipsum dolor sit amet.</a>
    <div class="ac-a">
      <p>Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="ac">
    <a href="#" class="ac-q">Lorem ipsum dolor sit amet.</a>
    <div class="ac-a">
      <p>Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="ac">
    <a href="#" class="ac-q">Lorem ipsum dolor sit amet.</a>
    <div class="ac-a">
      <p>Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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', {
    duration: 600, // animation duration in ms {number}
    itemNumber: 0, // item number which will be shown {number}
    aria: true, // add ARIA elements to the HTML structure {boolean}
    closeOthers: true, // show only one element at the same time {boolean}
    showItem: false, // always show element that has itemNumber number {boolean}
    elementClass: 'ac', // element class {string}
    questionClass: 'ac-q', // question class {string}
    answerClass: 'ac-a', // answer class {string}
    targetClass: 'ac-target' // target class {string}
});

Fire a function when toggling an item.

var accordion = new Accordion('.accordion-container',{
    onToggle: function(currentElement, allElements) {
      console.log(currentElement);
    }
});

Attach/attach events.

accordion.attachEvents();
accordion.detachEvents();

Changelog:

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