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

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

Aug 29, 2020 - 17:09

0 208

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

Demo Here

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