web-accordion is a lightweight, dependency-free, styleable accordion web component.

Installation

Script tag

<script type="module" src="https://unpkg.com/web-accordion/dist/web-accordion/web-accordion.esm.js"></script>
<script nomodule src="https://unpkg.com/web-accordion/dist/web-accordion/web-accordion.js"></script>

Node Module

• Install via npm: npm install web-accordion --save
• Import web-accordion in your JavaScript and defineCustomElements:

import { defineCustomElements } from 'web-accordion';
defineCustomElements();

Framework integration

For integration with different frameworks the stencil docs should be consulted.

Using this component

Add the web-accordion component as the accordion parent to your html. For each accordion entry add a web-accrdion-item. Add a slot="title" for the respective accordion item header:

<web-accordion>
  <web-accordion-item>
    <h1 slot="title">item no 1</h1>
    <div>content of item no 1</div>
  </web-accordion-item>
  <web-accordion-item>
    <h1 slot="title">item no 2</h1>
    <div>content of item no 2</div>
  </web-accordion-item>
</web-complete>

A full example with some styling can be found here.

web-accordion API

Methods

close(index: number) => Promise<void>

close an accordion item

Returns

Type: Promise<void>

open(index: number) => Promise<void>

Open an accordion item

Returns

Type: Promise<void>

web-accordion-item API

Properties

| Property | Attribute | Description | Type | Default | | ------------------------ | --------- | -------------------------------------------------------------------------------- | ------------------------------------------- | ------------------------------------ | | index | index | index of accordion item from top to bottom | number | -1 | | mutationObserverConfig | -- | The mutation observer config to listen for content changes in the accordion item | { childList: boolean; subtree: boolean; } | { childList: true, subtree: true } | | open | open | accordion item is open or opening (css transition) | boolean | false |

Events

| Event | Description | Type | | ---------------- | -------------------------------------------------------- | ------------------ | | contentChanged | triggered when the content of the accordion item changes | CustomEvent<any> | | openEvent | triggered when the accordion item is opened | CustomEvent<any> |

Methods

closeItem() => Promise<void>

close the accordion item

Returns

Type: Promise<void>

openItem() => Promise<void>

open the accordion item

Returns

Type: Promise<void>

Developer

npm i            install dependencies
npm start        start local development 
npm run build    build component for production
npm test         run e2e tests