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.

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`
`--background`

Slots

Name	Types	Description
`default`		bp-accordion-panel

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`	The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget
`popoverTargetAction`	`\| 'toggle' \| 'show' \| 'hide'`	The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction
`popovertarget`	`string`	The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget
`command`	`string`	The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command
`commandFor`	`string`	The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command
`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
`name`	`string`	represents the name of the current element as a string.
`value`	`string`	determines the current value
`popoverTargetElement`	`HTMLElement`	The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget
`popovertargetaction`	`\| 'toggle' \| 'show' \| 'hide'`	The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction
`popovertarget`	`string`	The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget
`command`	`string`	The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command
`commandFor`	`string`	The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command

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