Skip to content

A mobile-friendly, web component-based, jank-free accordion

License

Notifications You must be signed in to change notification settings

AyogoHealth/ay-accordion

Repository files navigation

ayAccordion

A mobile friendly, web component based jank free accordion

Features

  • 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

Installation

npm install ay-accordion

Usage

<!-- As a script tag -->
<script src="node_modules/ay-accordion/dist/index.js"></script>

<ay-accordion-root multiple>
  <ay-accordion open>
    <ay-accordion-header>Panel 1 (Click to open)</ay-accordion-header>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ay-accordion>
</ay-accordion-root>

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

TThis 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 ability 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.

Contributing

Contributions of bug reports, feature requests, and pull requests are greatly appreciated!

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Licence

Released under the MIT Licence.

Copyright © 2020 Ayogo Health Inc.

Acknowledgements & Thanks

This project would not have happened without the knowledge and support of Ada Rose Cannon, in particular the following posts: