Accordion

Overview

Accordions are helpful to shorten pages and reduce scrolling by hiding content that's not crucial to display at all times. The accordion component consists of several pre-styled components and directives.

Formatting

Accordions are built using <daff-accordion>, <daff-accordion-item>, and [daffAccordionItemTitle].

• <daff-accordion>: A wrapper for grouping accordion items.
• <daff-accordion-item>: The wrapper for the title and content. It handles the expansion and collapse of the inner content when clicked.
• [daffAccordionItemTitle]: Used to provide a high level overview of the content.

Any additional content placed inside of an accordion item will be displayed as part of the collapsible content.

Usage

import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_ACCORDION_COMPONENTS,
  ],
})
export class CustomComponent {}

<daff-accordion>
  <daff-accordion-item>
    <div daffAccordionItemTitle></div>
    <p>Item Content</p>
  </daff-accordion-item>
  <daff-accordion-item>
    <div daffAccordionItemTitle></div>
    <p>Item Content</p>
  </daff-accordion-item>
</daff-accordion>

Examples

Expand an item by default

Use the initiallyExpanded property on the accordion item to have it opened by default.

<daff-accordion-item [initiallyExpanded]="true"></daff-accordion-item>

Disable an item

Use the disabled property on the accordion item to prevent it from being expanded or collapsed.

<daff-accordion-item [disabled]="true"></daff-accordion-item>

Accessibility

Accordion follows the Accordion WAI-ARIA design pattern.

• Titles have an id, the button role, the aria-expanded state, and the aria-controls property set to the ID specified by the contentId property. It uses an autogenerated value by default but can be customized.
• Content blocks have an id, the region role, and the aria-labelledby property set to the ID specified by the itemId property. It uses an autogenerated value by default but can be customized.

Keyboard interactions