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

Events

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