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

Category: Accordion , Javascript | April 4, 2019
Author: michu2k
Views Total: 3,210
Official Page: Go to website
Last Update: April 4, 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({
    callFunction: function callFunction() {} 
});

Changelog:

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:


Leave a Reply