Author: | michu2k |
---|---|
Views Total: | 688 views |
Official Page: | Go to website |
Last Update: | March 19, 2023 |
License: | MIT |
Preview:

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="dist/accordion.min.css"> <script src="dist/accordion.min.js"></script>
The basic html structure for the accordion.
<div class="accordion-container"> <div class="ac"> <h2 class="ac-header"> <button class="ac-trigger">Trigger 1</button> </h2> <div class="ac-panel"> <p class="ac-text">Content 1</p> </div> </div> <div class="ac"> <h2 class="ac-header"> <button class="ac-trigger">Trigger 2</button> </h2> <div class="ac-panel"> <p class="ac-text">Content 2</p> </div> </div> <div class="ac"> <h2 class="ac-header"> <button class="ac-trigger">Trigger 3</button> </h2> <div class="ac-panel"> <p class="ac-text">Content 3</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', { // animation duration in ms {number} duration: 600, // add ARIA elements to the HTML structure {boolean} ariaEnabled: true, // allow collapse expanded panel {boolean} collapse: true, // show multiple elements at the same time {boolean} showMultiple: false, // disabling this option will find all items in the container {boolean} onlyChildNodes: true, // show accordion elements during initialization {array} openOnInit: [], // element class {string} elementClass: 'ac', // trigger class {string} triggerClass: 'ac-trigger', // panel class {string} panelClass: 'ac-panel', // active element class {string} activeClass: 'is-active' });
Callback functions.
var accordion = new Accordion('.accordion-container', { // calls before the item is opened {function} beforeOpen: function beforeOpen() {}, // calls when the item is opened {function} onOpen: function onOpen() {}, // calls before the item is closed {function} beforeClose: function beforeClose() {}, // calls when the item is closed {function} onClose: function onClose() {}, });
API methods.
// open an accordion panel accordion.open(index); // close an accordion panel accordion.close(index); // toggle an accordion panel accordion.toggle(index); // open all accordion panels accordion.openAll(); // close all accordion panels accordion.closeAll(); // destroy the instance accordion.destroy(); // update accordion.update(); // attach/detach events accordion.attachEvents(); accordion.detachEvents();
Changelog:
v3.3.4 (03/19/2023)
- Adjusted styles
- Fixed a bug when defined IDs were overwritten
- Fixed a bug when currFocusedIdx wasn’t set correctly
- Fixed a bug with transition event fired too often
- Replaced deprecated keyCode event
- Escape class names in selectors
- ESLint: Enable no-unused-vars rule
- pkg.json: Changed min Edge version to 80
v3.3.2 (08/15/2022)
- Moved execution of beforeOpen fn before panel calculation
v3.3.1 (08/06/2022)
- Fixed a bug when updateARIA wasn’t fired when the closeAll function was called
- openAll and closeAll will only work on open/close elements, added missing onClose & onOpen calls
v3.3.0 (04/30/2022)
- Added onlyChildNodes option
- Fixed a bug with incorrect visiblity when openOnInit was set to 0 and more elements were loaded.
- Added additional packages and settings to the gulp config
v3.2.0 (03/19/2022)
- Added .update() method
- Updated packages
v3.1.0 (11/12/2020)
- Fixed accordion icon state
v3.0.0 (11/12/2019)
- Refactoring & Optimization
- Added keydown handlers (space, arrowUp, arrowDown, home, end)
- Added openOnInit option
- Added collapse option
- Added activeClass option
- Added beforeOpen option
- Added onOpen option
- Added beforeClose option
- Added onClose option
- Added open method
- Added close method
- Added toggle method
- Added openAll method
- Added closeAll method
- Added toggle method
- Added destroy method
- Updated HTML structure
- Updated CSS classes
- Updated ARIA
- Renamed options
- Removed itemNumber option
- Removed showItem option
- Removed onToggle option
- Removed targetClass option
- Remove IE support
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
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
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.