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

Category: Accordion , Javascript | May 10, 2019
Author: michu2k
Views Total: 3,576
Official Page: Go to website
Last Update: May 10, 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:

Include the Accordion’s JavaScript and Stylesheet on the webpage.

<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.

var accordion = new Accordion();

Options and defaults.

var accordion = new Accordion({
    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({
    onToggle: function onToggle() {} 
});

Changelog:

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:


One thought 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

Leave a Reply