Accordion

An accordion is a group of vertically stacked, collapsible sections that allow users to toggle the visibility of related content.

Usage

API

Overview

Accordions help reduce scrolling by hiding non-essential information until it's needed. They organize content into collapsible sections, making it easier for users to find and focus on information relevant to them. This is especially useful for long pages where not all information needs to be visible at once.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed. Learn More.

<daff-accordion>
  <daff-accordion-item>
    <div daffAccordionItemTitle>This is the accordion item title</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis
      ultrices nunc, et maximus quam efficitur sed.
      <a href="/">Learn More.</a>
    </p>
  </daff-accordion-item>
  <daff-accordion-item>
    <div daffAccordionItemTitle>This is the accordion item title</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis
      ultrices nunc, et maximus quam efficitur sed.
      <a href="/">Learn More.</a>
    </p>
  </daff-accordion-item>
  <daff-accordion-item>
    <div daffAccordionItemTitle>This is the accordion item title</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis
      ultrices nunc, et maximus quam efficitur sed.
      <a href="/">Learn More.</a>
    </p>
  </daff-accordion-item>
</daff-accordion>

Best practices

When to use

To organize related information
To shorten pages and reduce scrolling when screen space is limited and content is not crucial to read

When not to use

When most users will need to see all content anyway
The content is very short and hiding it adds unnecessary complexity (use list instead)

Usage

To use accordion, import DAFF_ACCORDION_COMPONENTS directly into your custom component:

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

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

Anatomy

An accordion consists of the following components:

Container

<daff-accordion>: The wrapper component that groups all accordion items together.

Item

<daff-accordion-item>: Individual collapsible section containing a title and content. Handles expansion and collapse on user interaction.

Title

[daffAccordionItemTitle]: The clickable header that toggles the accordion item's visibility.

Content

Content placed inside <daff-accordion-item> (excluding the title) forms the collapsible panel content that is shown or hidden when toggled.

Basic structure

<daff-accordion>
 <daff-accordion-item>
   <div daffAccordionItemTitle>Title</div>
   <div>Expandable content</div>
 </daff-accordion-item>
</daff-accordion>

Features

Expand an item by default

Use the initiallyExpanded property on the accordion item to have an item open by default.

<daff-accordion>
  <daff-accordion-item [initiallyExpanded]="true">
    <div daffAccordionItemTitle>This is the accordion item title</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis
      ultrices nunc, et maximus quam efficitur sed.
      <a href="/">Learn More.</a>
    </p>
  </daff-accordion-item>
  <daff-accordion-item>
    <div daffAccordionItemTitle>This is the accordion item title</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis
      ultrices nunc, et maximus quam efficitur sed.
      <a href="/">Learn More.</a>
    </p>
  </daff-accordion-item>
  <daff-accordion-item>
    <div daffAccordionItemTitle>This is the accordion item title</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis
      ultrices nunc, et maximus quam efficitur sed.
      <a href="/">Learn More.</a>
    </p>
  </daff-accordion-item>
</daff-accordion>

Disable an accordion item

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

<daff-accordion>
  <daff-accordion-item [disabled]="true">
    <div daffAccordionItemTitle>This is the accordion item title</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis
      ultrices nunc, et maximus quam efficitur sed.
      <a href="/">Learn More.</a>
    </p>
  </daff-accordion-item>
  <daff-accordion-item>
    <div daffAccordionItemTitle>This is the accordion item title</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis
      ultrices nunc, et maximus quam efficitur sed.
      <a href="/">Learn More.</a>
    </p>
  </daff-accordion-item>
  <daff-accordion-item>
    <div daffAccordionItemTitle>This is the accordion item title</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo
      lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis
      ultrices nunc, et maximus quam efficitur sed.
      <a href="/">Learn More.</a>
    </p>
  </daff-accordion-item>
</daff-accordion>

Accessibility

Accordion follows the Accordion WAI-ARIA design pattern.

Titles act as buttons with:

role="button"
A unique id, defined by the contentId property.
aria-expanded to indicate current state.
aria-controls property linked to the associated panel content.

Content blocks include:

role="region"
A unique id, defined by the itemId property.
aria-labelledby property linked to the corresponding title.

IDs are autogenerated by default but can be overridden via the contentId and itemId inputs on <daff-accordion-item>.

Keyboard interactions

Key	Action
`Tab`	Moves focus to the next focusable element.
`Space` / `Enter`	Expands or collapses the focused accordion item's panel content.