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.

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
- v2.6.4
09/08/2018
- v2.6.0
05/27/2018
- v2.5.1