@19h47/accordion v5.1.1

@19h47/accordion

Sur un petit air d'accordéon Léon

Installation

yarn add @19h47/accordion

Usage

import Accordion from '@19h47/accordion';

const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);
accordion.init();

<div class="js-accordion">
	<div class="js-accordion-panel" data-accordion-open="true" data-accordion-deselect="true">
		<button
			class="js-accordion-header"
			type="button"
			aria-expanded="true"
			aria-controls="lorem-body"
			id="lorem-header"
		>
			Toggle
		</button>

		<div id="lorem-body" role="region">
			<div class="js-accordion-inner">
				Sit amet, consectetur adipisicing elit. Omnis ex inventore tempore. Quam voluptas
				quibusdam excepturi accusantium voluptatum facere. Nemo vero iste recusandae, at
				magnam tenetur maxime ad optio veniam!<br />
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, molestias
				excepturi molestiae nesciunt alias. Nobis aut praesentium, commodi minus laborum
				ullam at quod soluta qui tempore sit eveniet dicta esse.
			</div>
		</div>
	</div>
</div>

Keyboard Support

Role, Property, State, and Tabindex Attributes

Option

Options can be set as data-attribute.

Open

Is the panel open or not.

<button data-accordion-open="true">Button</button>

Deselect

Can the panel be deselected or not.

<button data-accordion-deselect="true">Button</button>

Event

Open

import Accordion from '@19h47/accordion';

const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);

accordion.init();

accordion.panels.forEach(panel => {
	panel.el.addEventListener('Panel.open', ({ detail }) => {
		console.log({ detail });
	});
});

Close

import Accordion from '@19h47/accordion';

const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);

accordion.init();

accordion.panels.forEach(panel => {
	panel.el.addEventListener('Panel.close', ({ detail }) => {
		console.log({ detail });
	});
});

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn serve

# build for production
$ yarn build

Example

An example is located right here, see sources.

Acknowledgments

• Accessible toggle tabs and accordion
• Accordion