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
`layer`	`'flat' \| 'container'`	determines the visual layer style (container vs flat for nesting)

Attributes

Name	Types	Description
`layer`	`'flat' \| 'container'`	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
`expanded`	`boolean`	determine if element is expanded

Attributes

Name	Types	Description
`expanded`	`boolean`	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
`pressed`	`boolean`	turns the button into a toggle button
`selected`	`boolean`	indicate the current "selected" state of various widgets
`readonly`	`boolean`	makes the element not mutable, meaning the user can not interact with button
`disabled`	`boolean`	determines if element is mutable or focusable
`type`	`'button' \| 'submit'`	default behavior of the button
`name`	`string`	represents the name of the current element as a string.
`value`	`string`	determines the current value
`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
`pressed`	`boolean`	turns the button into a toggle button
`selected`	`boolean`	indicate the current "selected" state of various widgets
`expanded`	`boolean`	indicate if a control is expanded or collapsed
`readonly`	`boolean`	makes the element not mutable, meaning the user can not interact with button
`disabled`	`boolean`	determines if element is mutable or focusable
`type`	`'button' \| 'submit'`	default behavior of the button
`value`	`string`	determines the current value
`popoverTargetElement`	`HTMLElement`
`popovertargetaction`	`\| 'toggle' \| 'show' \| 'hide'`
`popovertarget`	`string`

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