or

.
- The second child in a

is the expandable/collapsible content.
- It can be any tag allowed in AMP HTML.
- 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.

$3

``sh
npm install @bentoproject/accordion
`

`javascript
import {defineElement as defineBentoAccordion} from '@bentoproject/accordion';
defineBentoAccordion();
`

$3

`html





`

$3

`html



type="module"
async
src="https://cdn.ampproject.org/bento.mjs"
>

type="module"
async
src="https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs"
>
nomodule
async
src="https://cdn.ampproject.org/v0/bento-accordion-1.0.js"
>
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-accordion-1.0.css"
/>





Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

Content in section 3.

`

$3

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



type="module"
async
src="https://cdn.ampproject.org/bento.mjs"
>

type="module"
async
src="https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs"
>
nomodule
async
src="https://cdn.ampproject.org/v0/bento-accordion-1.0.js"
>
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-accordion-1.0.css"
/>





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

Toggle All Sections
Toggle Section 1

`

##### 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

Expand All Sections
Expand Section 1

`

##### 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

Collapse All Sections
Collapse Section 1

`

#### 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.


`

$3

Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.

`html
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-accordion-1.0.css"
/>
`

Alternatively, you may also make the light-weight pre-upgrade styles available inline:

`html

`

$3

#### 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.

`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

src="https://source.unsplash.com/random/320x256"
width="320"
height="256"
/>

`

$3

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

$3

`sh
npm install @bentoproject/accordion
`

$3

`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


);
}
`

$3

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 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 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 (

id="section1"
key={1}
onExpandStateChange={(expanded) => {
alert(expanded ? 'section1 expanded' : 'section1 collapsed');
}}
>



Section 1

Content 1

id="section2"
key={2}
onExpandStateChange={(expanded) => {
alert(expanded ? 'section2 expanded' : 'section2 collapsed');
}}
>

Section 2

Content 2

id="section3"
key={3}
onExpandStateChange={(expanded) => {
alert(expanded ? 'section3 expanded' : 'section3 collapsed');
}}
>

Section 3

Content 3


)
}
`

$3

#### 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;
}
`

$3

#### 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 for React and Preact components.

BentoAccordionHeader does not yet support any custom props

#### BentoAccordionContent

#### Common props

This component supports the common props for React and Preact components.

BentoAccordionContent does not yet support any custom props