@alcatraz-components/accordion

A keyboard-accessible accordion component.

Usage

In HTML:

``html














Age: 13

Color: gray

Age: 13

Color: orange

Age: 4

Color: gray

Age: 3

Color: orange

`

In a JavaScript application:

`
npm install @alcatraz-components/accordion
`

`js
import '@alcatraz-components/accordion';
`

If you are using webpack, you can instead include the component in your entry array:

`js
module.exports = {
entry: ['@alcatraz-component/accordion', './index.js']
};
`

Component properties

The main component, alcatraz-accordion, has one _optional_, configurable property: multiPanel.

Setting multiPanel="true" allows the user to open several panels at once. The default behavior closes the previous panel when the user clicks on a new panel.

`html





`

The alcatraz-accordion-panel has two configurable properties:

1. label: This is the text that displays as the panel title.
1. expanded: This is an _optional_ property that expands a panel upon load.

`html




Age: 13

Color: gray

`

Configurable styles

Use the CSS custom properties outlined below to customize the look of the accordion from your stylesheet.

`css
:root {
/ Accordion /
--alcatraz-accordion-border: 1px solid #ddd;
--alcatraz-accordion-border-radius: 0;

/ Item /
--alcatraz-accordion-item-padding: 1rem;
--alcatraz-accordion-button-bg-color: #fff;
--alcatraz-accordion-button-font-size: 20px;
--alcatraz-accordion-button-text-align: left;
--alcatraz-accordion-panel-margin-top: 1rem;
}
``