Author: | stuartjnelson |
---|---|
Views Total: | 1,301 views |
Official Page: | Go to website |
Last Update: | November 16, 2019 |
License: | MIT |
Preview:

Description:
Badger Accordion is a simple, performant, accessible JavaScript accordion plugin that uses CSS3 animations for the smooth expand/collapse effects.
How to use it:
Install and import the Badger Accordion into your project.
$ npm install badger-accordion --save
Or you can include the Badger Accordion’s JavaScript and Stylesheet on your web page.
<link rel="stylesheet" href="css/badger-accordion.css"> <script src="js/badger-accordion.js""></script>
The example HTML structure for the accordion.
<dl class="badger-accordion js-badger-accordion"> <dt> <button class="badger-accordion__header js-badger-accordion-header"> <div class="badger-accordion__header-title"> Accordion Header </div> <div class="badger-accordion__header-icon"> </div> </button> </dt> <dd class="badger-accordion__panel js-badger-accordion-panel"> <div class="badger-accordion__panel-inner text-module js-badger-accordion-panel-inner"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </dd> <dt> <button class="badger-accordion__header js-badger-accordion-header"> <div class="badger-accordion__header-title"> Accordion Header </div> <div class="badger-accordion__header-icon"> </div> </button> </dt> <dd class="badger-accordion__panel js-badger-accordion-panel"> <div class="badger-accordion__panel-inner text-module js-badger-accordion-panel-inner"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </dd> </dl>
Create a new Badger Accordion instance and done.
const myAccordion = new BadgerAccordion('.js-badger-accordion');
Default configuration options of the accordion.
const myAccordion = new BadgerAccordion('.js-badger-accordion',{ headerClass: '.js-badger-accordion-header', panelClass: '.js-badger-accordion-panel', panelInnerClass: '.js-badger-accordion-panel-inner', hiddenClass: 'is-hidden', activeClass: '-ba-is-active', initalisedClass: 'badger-accordion--initalised', headerDataAttr: 'data-badger-accordion-header-id', openMultiplePanels: false, openHeadersOnLoad: [], headerOpenLabel: 'Open accordion panel', headerCloseLabel: 'Close accordion panel', roles: true // Controls setting presentation role on the container element & region on the panel. By using a boolean value you will set both attributes. By settings this as an object you will be explicitly setting only that role. Any roles not included in the object will not be set. In the example above only the region role will be set. });
API methods.
// gets current state // Arguments: headerId/s - array myAccordion.getState() // opens a specific accordion panel myAccordion.open(headerIndex) // closes a specific accordion panel myAccordion.close(headerIndex) // toggles accordion panels // animationAction is either open or closed. myAccordion.togglePanel(animationAction, headerIndex) // opens all accordion panel myAccordion.openAll() // closes all accordion panel myAccordion.closeAll() // calculates and sets all panels height calculateAllPanelsHeight() // calculates and sets a single panels height calculatePanelHeight()
Changelog:
v1.2.4 (2019-11-16)
- All dependancies package
- Some package security vunerabilities
- NPM package release
v1.2.3 (2019-05-10)
- Added Option addListenersOnInit.
v1.2.0 (2019-02-09)
- Created the ability to have nested accordions.
v1.1.4 (2018-12-08)
- Update & bugfix
v1.1.3 (2018-12-02)
- Update & bugfix
v1.1.2 (2018-08-12)
- Update & bugfix
v1.1.1 (2018-06-17)
- Update & bugfix