web-accordion
is a lightweight, dependency-free, styleable accordion web component.
<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>
- Install via npm:
npm install web-accordion --save
- Import
web-accordion
in your JavaScript anddefineCustomElements
:
import { defineCustomElements } from 'web-accordion';
defineCustomElements();
For integration with different frameworks the stencil docs should be consulted.
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.
close an accordion item
Type: Promise<void>
Open an accordion item
Type: Promise<void>
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 |
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> |
close the accordion item
Type: Promise<void>
open the accordion item
Type: Promise<void>
npm i install dependencies
npm start start local development
npm run build build component for production
npm test run e2e tests