Accordion

Accordions enable users to expand or collapse sections of content on a page.

Use cases:

• presenting multiple sections of content
• enabling users to show or hide specific sections of related information

Example

You can see an accordion in action in the example below. This has three panels (accordion items) that can be expanded or collapsed by clicking on the + or - icons.

Panel onePanel one contentPanel twoPanel two contentPanel threePanel three content

Genesis

Declaration

<rapid-accordion>
  <rapid-accordion-item></rapid-accordion-item>
  <rapid-accordion-item></rapid-accordion-item>
</rapid-accordion>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-accordion>
      <rapid-accordion-item expanded>
        <span slot="heading">Panel one</span>
        Panel one content
      </rapid-accordion-item>
      <rapid-accordion-item>
        <span slot="heading">Panel two</span>
        Panel two content
      </rapid-accordion-item>
      <rapid-accordion-item expanded>
        <span slot="heading">Panel three</span>
        Panel three content
      </rapid-accordion-item>
    </rapid-accordion>
`,
})
export class MyElement extends GenesisElement { }

React

Declaration

<rapid-accordion>
  <rapid-accordion-item></rapid-accordion-item>
  <rapid-accordion-item></rapid-accordion-item>
</rapid-accordion>

Usage

export function MyComponent() {
  return (
    <rapid-accordion>
      <rapid-accordion-item expanded>
        <span slot="heading">Panel one</span>
        Panel one content
      </rapid-accordion-item>
      <rapid-accordion-item>
        <span slot="heading">Panel two</span>
        Panel two content
      </rapid-accordion-item>
      <rapid-accordion-item expanded>
        <span slot="heading">Panel three</span>
        Panel three content
      </rapid-accordion-item>
    </rapid-accordion>
  );
}

Angular

Declaration

<rapid-accordion>
  <rapid-accordion-item></rapid-accordion-item>
  <rapid-accordion-item></rapid-accordion-item>
</rapid-accordion>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
    <rapid-accordion>
      <rapid-accordion-item expanded>
        <span slot="heading">Panel one</span>
        Panel one content
      </rapid-accordion-item>
      <rapid-accordion-item>
        <span slot="heading">Panel two</span>
        Panel two content
      </rapid-accordion-item>
      <rapid-accordion-item expanded>
        <span slot="heading">Panel three</span>
        Panel three content
      </rapid-accordion-item>
    </rapid-accordion>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent { }

Accordion API

Attributes

Attribute	Type	Description	Example
expand-mode	"single" | "multi"	When using the default multi expand mode, the user can expand multiple sections at the same time. When using the single expand mode, the user can only expand one section at a time.	<rapid-accordion expand-mode="single">

Properties

The properties of this component are all controlled via attributes.

Slots

Slot	Description
Default	The default slot which should be filled with <rapid-accordion-item>.

Parts

Part	Description
item	The slot which is populated with accordion items.

Events fired

Event	Type	Description	Example
change	string	Fires the event when the accordion item changes its state. The event detail is the index active item.	<rapid-accordion @change="${(x,ctx) => x.myChangeHandler(ctx.event)}">

Events listened to

This component doesn't listen to any events.

Accordion item API

Attributes

Attribute	Type	Description	Example
heading-level	1 - 6	Sets the header level of the heading inside of the accordion item. This is equivalent to the h1 - h6 tags. The default is 2.	<rapid-accordion-item heading-level=3>
expanded	boolean	Sets the accordion item to be expanded, allowing the contents to be visible to the user.	<rapid-accordion-item expanded>

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

Slot	Description
Default	The default slot for placing accordion item content
start	Content to be placed between the heading and the icon
end	Content to be placed between the start slot and icon
heading	Content that serves as the accordion item heading and the text of the expand button
expanded-icon	The expanded icon
collapsed-icon	The collapsed icon

Parts

Part	Description
heading	Wraps the button
button	The button that serves to invoke the item
heading-content	Wraps the slot for the heading content within the button
icon	The icon container
expanded-icon	The expanded icon slot
collapsed-icon	The collapsed icon
region	The wrapper for the accordion item content

Events fired

Event	Type	Description	Example
change	void	Fires the accordion's button is clicked	<rapid-accordion-item @change="${(x) => x.myChangeHandler()}">

Events listened to

This component doesn't listen to any events.