- Keyboard accessible and screen-reader friendly
- Support for single/multiple expanded regions
- Smooth animation on desktop and mobile
- Per-section open/close events
- Works with browsers supporting ES6 and web components
To get started, install the package from npm: npm install ay-accordion
Usage
Add a script tag to your page to reference the accordion.js file:
<script src="node_modules/ay-accordion/dist/index.js"></script>
Mark up your accordions using the provided web component HTML elements:
<ay-accordion-root multiple>
<ay-accordion open>
<ay-accordion-header>Panel 1 (Click to open)</b>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</ay-accordion-header>
</ay-accordion>
</ay-accordion-root multiple>This package provides 3 HTML custom elements built using web components, which can be used to build accordions.
ay-accordion-root
This web component wraps the entire accordion, as well as any content below the accordion that needs to be pushed down when accordion sections open and close.
- multiple
- This attribute allows multiple accordion sections to be open at the same time (default is only a single section expanded at a time).
ay-accordion
This web component manages a single expanding/collapsing accordion section, including the title content shown when it is collapsed.
- open
- This attribute will make the section expanded by default.
- disabled
- This attribute will disable the open/close functionality of the accordion. The accordion will still maintain its original state open/close.
ay-accordion-header
This web component wraps the title of the accordion section, and attaches the event handlers to expand the section when clicked.
Contributions of bug reports, feature requests, and pull requests are greatly appreciated on our GitHub project!
Released under the terms of the MIT License.
This project would not have happened without the knowledge and support of Ada Rose Cannon, in particular the following posts: