A vanilla, a11y ready web component for your basic accordion needs. Small, simple, nothing more.
npm install wc-accordionThis is mostly inspired by [this post][link-post] from Louis Hoebregts (@Mamboleoo).
Check out the [demo page][link-demo]. ☀️
``bash`
npm install wc-accordionapp.js
in your app entry point (e.g. )`js`
import 'wc-accordion.js'`
or import directly from unpkg.comhtml
`
Then just wrap your standard [\][detials] elements. Style the tag as you need. Take a wrapper class for your content and thats it!
`html
Some details
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
Some details
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
Some details
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
`
To use a custom name for the element, import the default class and define the element yourself like so:
`js
import { Accordion } from 'wc-accordion'
customElement.define('my-accordion', Accordion);
`
`html`
...
| Property | Type | Description |
|-----------------------|------------------------|--------------------------------------------------|
| close | (index: any) => void | Close a item by index |() => void
| closeAll | | Close all at once |(index: any) => void
| open | | Open a item by index |() => void
| openAll | | Open all at once |
, normal | Exclusive will limit to only one open item at a time
CSS Custom Properties
Use the following custom properties on the your
elements to set animation timings and easing.| Property | Value |
|-----------------------|------------------------------|
| --animation-duration | Duration of the animation |
| --animation-duration-start | Duration of the open animation |
| --animation-duration-end | Duration of the closing animation |
| --animation-easing | Animation ease (e.g.
ease-in) | @media (prefers-reduced-motion)
The component queries the CSS Media feature [prefers-reduced-motion][prefers-reduce-motion] and if set it will skip open and close animation all together.
Development
Install dev dependencies`bash
yarn install
`
Link local package
`bash
yarn run link
yarn link wc-accordion
`
Run dev server
`bash
yarn dev
``[link-demo]: https://funkeeflow.github.io/wc-accordion/
[link-license]: https://github.com/funkeeflow/wc-accordion/blob/master/LICENSE
[link-post]: https://css-tricks.com/how-to-animate-the-details-element-using-waapi/
[prefers-reduce-motion]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
[detials]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
[MIT][link-license]