Accordion

The accordion component is used to display a large amount of content in a small space. The accordion should be used to group related content together. The titles or headings of the accordion sections should be clear and concise, describing the content that will be revealed.

Example

Expanded accordion panel

Expanded accordion content

Disabled accordion header

Disabled accordion content

Collapsed accordion

Collapsed accordion content

code

<script type="module">
  import '@blueprintui/components/include/accordion.js';
</script>

<bp-accordion>
  <bp-accordion-panel expanded>
    <bp-accordion-header>Expanded accordion panel</bp-accordion-header>
    <bp-accordion-content>
      <p bp-text="content">Expanded accordion content</p>
    </bp-accordion-content>
  </bp-accordion-panel>
  <bp-accordion-panel>
    <bp-accordion-header disabled>Disabled accordion header</bp-accordion-header>
    <bp-accordion-content>
      <p bp-text="content">Disabled accordion content</p>
    </bp-accordion-content>
  </bp-accordion-panel>
  <bp-accordion-panel>
    <bp-accordion-header>Collapsed accordion</bp-accordion-header>
    <bp-accordion-content>
      <p bp-text="content">Collapsed accordion content</p>
    </bp-accordion-content>
  </bp-accordion-panel>
</bp-accordion>

Install

NPM

// npm package
import '@blueprintui/components/include/accordion.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/accordion.js/+esm';
</script>

Accessibility

Use clear, descriptive titles or headings for the accordion sections.
Ensure keyboard navigation order is not disrupted.
Provide an alternative way for users to access the content in the accordion sections, such as a "show all" or "expand all" button.

bp-accordion

Properties

Name	Types	Description
`accessor`		determines the visual layer style (container vs flat for nesting)
`layer`	`'flat' \| 'container'`

Attributes

Name	Types	Description
`accessor`		determines the visual layer style (container vs flat for nesting)

CSS Properties

Name	Types	Description
`--border-color`
`--border-width`
`--border-radius`

Slots

Name	Types	Description
`default`		slot for accordion panels

bp-accordion-panel

Properties

Name	Types	Description
`accessor`		determine if element is expanded
`expanded`	`boolean`

Attributes

Name	Types	Description
`accessor`		determine if element is expanded

Slots

Name	Types	Description
`default`		slot for header and content
`bp-accordion-header`
`bp-accordion-content`

bp-accordion-header

Properties

Name	Types	Description
`expanded`	`boolean`
`pressed`	`boolean`
`selected`	`boolean`
`readonly`	`boolean`
`disabled`	`boolean`
`type`	`'button' \| 'submit'`
`name`	`string`	represents the name of the current element as a string.
`value`	`string`
`popoverTargetElement`	`HTMLElement`
`popoverTargetAction`	`\| 'toggle' \| 'show' \| 'hide'`
`popovertarget`	`string`
`form`	`HTMLFormElement`
`formAction`	`string`
`formEnctype`	`string`
`formMethod`	`string`
`formNoValidate`	`boolean`
`formTarget`	`string`
`labels`	`NodeListOf`
`validationMessage`	`string`
`validity`	`ValidityState`
`willValidate`	`boolean`
`checkValidity`	`any`
`reportValidity`	`any`
`setCustomValidity`	`any`
`formAssociated`	`boolean`

Attributes

Name	Types	Description
`accessor`		determines the current value
`popovertargetaction`		determines the current value
`popovertarget`		determines the current value

CSS Properties

Name	Types	Description
`--background`
`--color`
`--font-size`
`--padding`

Slots

Name	Types	Description
`default`		slot for header content

bp-accordion-content

Properties

Name	Types	Description

CSS Properties

Name	Types	Description
`--color`
`--font-size`
`--font-weight`
`--background`

Slots

Name	Types	Description
`default`		slot for content