` elements as its direct children. - Each `

` must contain exactly two direct children. - The first child in a `

` is the heading for that section of the Bento Accordion. It must be a heading element such as `

-

` or `
`. - The second child in a `
` is the expandable/collapsible content. - It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md). - A click or tap on a `
` heading expands or collapses the section. - A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain. ## Web Component You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style). ### Import via npm ```sh npm install @bentoproject/accordion ``` ```javascript import {defineElement as defineBentoAccordion} from '@bentoproject/accordion'; defineBentoAccordion(); ``` ### Include via ` ``` ### Example ```html

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

Content in section 3.

``` ### Interactivity and API usage Bento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document: ```javascript await customElements.whenDefined('bento-accordion'); const api = await accordion.getApi(); ``` #### API Example ```html

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

Content in section 3.

``` #### Actions ##### toggle() The `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value. ```html

Section 1

Bunch of awesome content

Section 2

Bunch of awesome content

Section 3

Bunch of awesome content

``` ##### expand() The `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value. ```html

Section 1

Bunch of awesome content

Section 2

Bunch of awesome content

Section 3

Bunch of awesome content

``` ##### collapse() The `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value. ```html

Section 1

Bunch of awesome content

Section 2

Bunch of awesome content

Section 3

Bunch of awesome content

``` #### Events The `bento-accordion` API allows you to register and respond to the following events: ##### expand This event is triggered when an accordion section is expanded and is dispatched from the expanded section. See below for example. ##### collapse This event is triggered when an accordion section is collapsed and is dispatched from the collapsed section. In the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed. See below for example. ##### Events Example ```html

Section 1

Puppies are cute.

Section 2

Kittens are furry.

``` ### Layout and style Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles. ```html ``` Alternatively, you may also make the light-weight pre-upgrade styles available inline: ```html ``` ### Attributes #### animate Include the `animate` attribute in `` to add a "roll down" animation when the content is expanded and "roll up" animation when collapsed. This attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md). ```html

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

Content in section 2.

``` #### expanded Apply the `expanded` attribute to a nested `
` to expand that section when the page loads. ```html

Section 1

Bunch of awesome content

Section 2

Bunch of awesome content

Section 3

Bunch of awesome expanded content

``` #### expand-single-section Allow only one section to expand at a time by applying the `expand-single-section` attribute to the `` element. This means if a user taps on a collapsed `
`, it will expand and collapse other expanded `
`'s. ```html

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

``` ### Styling You may use the `bento-accordion` element selector to style the accordion freely. Keep the following points in mind when you style an accordion: - `bento-accordion` elements are always `display: block`. - `float` cannot style a `
`, heading, nor content elements. - An expanded section applies the `expanded` attribute to the `
` element. - The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars. - Margins of the ``, `
`, heading, and content elements are set to `0`, but can be overridden in custom styles. - Both the header and content elements are `position: relative`. --- ## Preact/React Component ### Import via npm ```sh npm install @bentoproject/accordion ``` ### Example ```jsx import React from 'react'; import { BentoAccordion, BentoAccordionSection, BentoAccordionHeader, BentoAccordionContent } from '@bentoproject/accordion/react'; import '@bentoproject/accordion/styles.css'; function App() { return (
Section 1
Content 1
Section 2
Content 2
Section 3
Content 3 ); } ``` ### Interactivity and API usage Bento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`: ```jsx import React, {createRef} from 'react'; const ref = createRef(); function App() { return (
Section 1
Content 1
Section 2
Content 2
Section 3
Content 3 ); } ``` #### Actions The `BentoAccordion` API allows you to perform the following actions: ##### toggle() The `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value. ```javascript ref.current.toggle(); ref.current.toggle('section1'); ``` ##### expand() The `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value. ```javascript ref.current.expand(); ref.current.expand('section1'); ``` ##### collapse() The `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value. ```javascript ref.current.collapse(); ref.current.collapse('section1'); ``` #### Events The Bento Accordion API allows you to respond to the following events: ##### onExpandStateChange This event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section. See [example](#events-example) below for example. ##### onCollapse This event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section. In the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed. See [example](#events-example) below for example. ##### Events Example ```jsx import React, {createRef} from 'react'; import { BentoAccordion, BentoAccordionSection, BentoAccordionHeader, BentoAccordionContent } from '@bentoproject/accordion/react'; import '@bentoproject/accordion/styles.css'; function App() { const ref = createRef(); return ( { alert(expanded ? 'section1 expanded' : 'section1 collapsed'); }} >
Section 1
Content 1 { alert(expanded ? 'section2 expanded' : 'section2 collapsed'); }} >
Section 2
Content 2 { alert(expanded ? 'section3 expanded' : 'section3 collapsed'); }} >
Section 3
Content 3 ) } ``` ### Layout and style #### Container type The `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline: ```jsx ... ``` Or via `className`: ```jsx ... ``` ```css .custom-styles { background-color: red; } ``` ### Props #### BentoAccordion ##### animate If true, then uses "roll-down" / "roll-up" animation during the expansion and collapse of each section. Default: `false` ##### expandSingleSection If true, then expanding 1 section will automatically collapse all other sections. Default: `false` #### BentoAccordionSection ##### animate If true, then uses "roll-down" / "roll-up" animation during the expansion and collapse the section. Default: `false` ##### expanded If true, expands the section. Default: `false` ##### onExpandStateChange ```typescript (expanded: boolean): void ``` Callback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed) #### BentoAccordionHeader #### Common props This component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components. BentoAccordionHeader does not yet support any custom props #### BentoAccordionContent #### Common props This component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components. BentoAccordionContent does not yet support any custom props