Ractive Ez Accordion

Accordion component for ractive.js

Demo

Install

npm i ractive-ez-accordion

import 'ractive-ez-accordion';
import 'ractive-ez-accordion/themes/blue.less';

Theming requires less-loader.

Usage

<EzAccordion>
    <EzAccordionItem>
        <EzAccordionLink>Label Name</EzAccordionLink>
        <EzAccordionPane>Content</EzAccordionPane>
    </EzAccordionItem>
</EzAccordion>

Multiple mode

By default, an accordion will only allow one pane to be open at a time. You can use the multiple property to allow many panes to be opened at the same time

<EzAccordion multiple>

Dynamic panes

This component supports dynamic panes

<EzAccordion>
    {{#each panes as pane }}
    <EzAccordionItem>
        <EzAccordionLink>{{ pane.name }}</EzAccordionLink>
        <EzAccordionPane>{{ pane.contents }}</EzAccordionPane>
    </EzAccordionItem>
    {{/each}}
</EzAccordion>