Accordion beta

Accordion consists of multiple details elements, stacked vertically for default layout. Each element contains a summary and a content area, which is what the details part references. Users can click on the summary to expand or collapse the details element.

Default

Use accordion items to create individual sections or panels within the opening and closing of the <ch-accordion> element.

<ch-accordion>
  <ch-accordion-item heading="Panel One">Section Content One</ch-accordion-item>
  <ch-accordion-item heading="Panel Two">Section Content Two</ch-accordion-item>
  <ch-accordion-item heading="Panel Three">Section Content Three</ch-accordion-item>
  <ch-accordion></ch-accordion>
</ch-accordion>

Single Expand Mode

By default, the accordion has its open-single set to false. To ensure that only one accordion item opens at a time, set the open-single attribute’s value to single.

<ch-accordion open-single>
  <ch-accordion-item heading="Panel One">Section Content One</ch-accordion-item>
  <ch-accordion-item heading="Panel Two">Section Content Two</ch-accordion-item>
  <ch-accordion-item heading="Panel Three">Section Content Three</ch-accordion-item>
</ch-accordion>

API

Public API

Properties

Attribute / Property	Description	Type
dir	The dir global attribute is an enumerated attribute that indicates the directionality of the element's text.	'ltr' | 'rtl' | 'auto'
open-single / openSingle	If set, allows only one child accordion-item to be open at a time.	boolean | undefined

Slots

Name	Description
default	The default slot where accordion items are placed.

Events

Name	Description	Event Detail
ready	Emitted when the component is ready.	none

CSS Custom Properties

Name	Description	Default
--accordion-top-border-color	Sets the border top color of the accordion.	undefined

Full API