Wc-accordion NPM

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.