Sur un petit air d'accordéon Léon
yarn add @19h47/accordion
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>| Key | Function |
|---|---|
| Space or Enter | When focus is on the accordion header of a collapsed section, expands the section. |
| Tab |
|
| Shift + Tab |
|
| Down Arrow |
|
| Up Arrow |
|
| Home | When focus is on an accordion header, moves focus to the first accordion header. |
| End | When focus is on an accordion header, moves focus to the last accordion header. |
| Role | Attribute | Element | Usage |
|---|---|---|---|
| aria-controls="ID" | button | oints to the ID of the panel which the header controls. | |
| region | div | Creates a landmark region that contains the currently expanded accordion panel. |
Options can be set as data-attribute.
Is the panel open or not.
<button data-accordion-open="true">Button</button>Can the panel be deselected or not.
<button data-accordion-deselect="true">Button</button>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 });
});
});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 });
});
});# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn serve
# build for production
$ yarn build