Accessible Accordian

A simple, accessible, light-weight Web component written in pure JavaScript, allowing the easy creation of accordion-type components. Use one of our themes or apply your own. It's your choice!

Installation

Install via NPM

npm install @jhwc/accessible-accordian-web-component

Import it into your JavaScript

import "@jhwc/accessible-accordian-web-component"

Usage

The component comes in three variants, which can be enabled using the following attributes respectively: default, bbc and simply, no attribute (no styling will be applied).

<jhwc-accordian default>
    <span class="toggle-box__title" slot="title">
        I am a nice neat title! (click me to toggle the box)
    </span>
    <div class="toggle-box__content" slot="content">
        Here is some toggle-able content!
    </div>
</jhwc-accordian>

<jhwc-accordian bbc>
    <span class="toggle-box__title" slot="title">
        I am a nice neat title! (click me to toggle the box)
    </span>
    <div class="toggle-box__content" slot="content">
        Here is some toggle-able content!
    </div>
</jhwc-accordian>

<jhwc-accordian>
    <span class="toggle-box__title" slot="title">
        I am a nice neat title! (click me to toggle the box)
    </span>
    <div class="toggle-box__content" slot="content">
        Here is some toggle-able content!
    </div>
</jhwc-accordian>

Requirements

• ES6 import
• Nothing!