wc-accordion 🏖

A vanilla, a11y ready web component for your basic accordion needs. Small, simple, nothing more.

This is mostly inspired by this post from Louis Hoebregts (@Mamboleoo).

Demo

Check out the demo page. ☀️

Usage

npm install wc-accordion

in your app entry point (e.g. app.js)

import 'wc-accordion.js'

or import directly from unpkg.com

<script type="module" src="https://unpkg.com/wc-accordion"></script>

Then just wrap your standard <details> elements. Style the <summary> tag as you need. Take a wrapper class for your content and thats it!

  <wc-accordion class="accordion">
    <details>
      <summary>Some details</summary>
      <div class="wrapper">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        </p>
      </div>
    </details>
    <details>
      <summary>Some details</summary>
      <div class="wrapper">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        </p>
      </div>
    </details>
    <details>
      <summary>Some details</summary>
      <div class="wrapper">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        </p>
      </div>
    </details>
  </wc-accordion>

How to use a custom component name

To use a custom name for the element, import the default class and define the element yourself like so:

import { Accordion } from 'wc-accordion'

customElement.define('my-accordion', Accordion);

<my-accordion>
...
</my-accordion>

Properties

| Property | Type | Description | |-----------------------|------------------------|--------------------------------------------------| | close | (index: any) => void | Close a item by index | | closeAll | () => void | Close all at once | | open | (index: any) => void | Open a item by index | | openAll | () => void | Open all at once |

Attributes

| Attributes | Values | Description | |-----------------------|------------------------|-------------------------------------------------| | mode | exclusive, normal | Exclusive will limit to only one open item at a time

CSS Custom Properties

Use the following custom properties on the your <detials> 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 and if set it will skip open and close animation all together.

Development

Install dev dependencies

yarn install

Link local package

yarn run link
yarn link wc-accordion

Run dev server

yarn dev

Lincense

MIT