https://github.com/19h47/19h47-accordion
🪗
https://github.com/19h47/19h47-accordion
accordion javascript panel
Last synced: 6 months ago
JSON representation
🪗
- Host: GitHub
- URL: https://github.com/19h47/19h47-accordion
- Owner: 19h47
- Created: 2018-09-24T13:49:47.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-03-29T20:26:05.000Z (about 1 year ago)
- Last Synced: 2024-04-14T06:07:25.606Z (about 1 year ago)
- Topics: accordion, javascript, panel
- Language: HTML
- Homepage: https://19h47.github.io/19h47-accordion/
- Size: 4.05 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @19h47/accordion
> Sur un petit air d'accordéon Léon
## Installation
```
yarn add @19h47/accordion
```
## Usage
```javascript
import Accordion from '@19h47/accordion';
const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);
accordion.init();
```
```html
Toggle
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!
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.
```
## Keyboard Support
| Key | Function |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| _Space_ or _Enter_ | When focus is on the accordion header of a collapsed section, expands the section. |
| _Tab_ |
- Moves focus to the next focusable element.
- All focusable elements in the accordion are included in the page `Tab` sequence.
| _Shift + Tab_ |
- Moves focus to the previous focusable element.
- All focusable elements in the accordion are included in the page `Tab` sequence.
| _Down Arrow_ |
- When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on last accordion header, moves focus to first accordion header.
| _Up Arrow_ |
- When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on first accordion header, moves focus to last accordion header.
| _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, Property, State, and Tabindex Attributes
| 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. |
## Option
Options can be set as `data-attribute`.
### Open
Is the panel open or not.
```html
Button
```
### Deselect
Can the panel be deselected or not.
```html
Button
```
## Event
### Open
```javascript
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
```javascript
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
```bash
# 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](https://19h47.github.io/19h47-accordion/), see [sources](/docs/index.html).
## Acknowledgments
- [Accessible toggle tabs and accordion](https://gomakethings.com/accessible-toggle-tabs-and-accordions/)
- [Accordion](https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html)