Accordion

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

Use cases:

• Presenting multiple sections of content
• Allow the users to show or hide different sections of related information

Example

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

This component doesn't have any properties which are not also 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 accordion item content
start	Content which can be provided between the heading and the icon
end	Content which can be provided between the start slot and icon
heading	Content which serves as the accordion item heading and 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 which 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.