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.

Crafted from 100% organic cotton with a relaxed fit and reinforced stitching at the collar and cuffs. Machine washable and pre-shrunk to keep its shape wash after wash. View full specifications.

Free standard shipping on orders over $50. Orders placed before 2pm ship the same business day and typically arrive within 3–5 business days. Expedited options are available at checkout. See shipping policy.

Not quite right? Return unworn items within 30 days for a full refund, or exchange for a different size at no extra cost. Return shipping is on us for orders within the continental US. Start a return.

<daff-accordion>
  <daff-accordion-item>
    <div daffAccordionItemTitle>Product details</div>
    <p>
      Crafted from 100% organic cotton with a relaxed fit and reinforced
      stitching at the collar and cuffs. Machine washable and pre-shrunk to
      keep its shape wash after wash.
      <a href="/">View full specifications.</a>
    </p>
  </daff-accordion-item>
  <daff-accordion-item>
    <div daffAccordionItemTitle>Shipping and delivery</div>
    <p>
      Free standard shipping on orders over $50. Orders placed before 2pm ship
      the same business day and typically arrive within 3&ndash;5 business
      days. Expedited options are available at checkout.
      <a href="/">See shipping policy.</a>
    </p>
  </daff-accordion-item>
  <daff-accordion-item>
    <div daffAccordionItemTitle>Returns and exchanges</div>
    <p>
      Not quite right? Return unworn items within 30 days for a full refund,
      or exchange for a different size at no extra cost. Return shipping is
      on us for orders within the continental US.
      <a href="/">Start a return.</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

Import DAFF_ACCORDION_COMPONENTS into your 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 is composed of a container, items, titles, and content:

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

<daff-accordion>: The wrapper component that groups all accordion items together.
<daff-accordion-item>: Individual collapsible section containing a title and content. Handles expansion and collapse on user interaction.
[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.

Features

Expanding by default

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

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 [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>

Disabling an item

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

Crafted from 100% organic cotton with a relaxed fit and reinforced stitching at the collar and cuffs. Machine washable and pre-shrunk to keep its shape wash after wash. View full specifications.

No reviews yet. Be the first to share your thoughts once you've tried it.

<daff-accordion>
  <daff-accordion-item>
    <div daffAccordionItemTitle>Product details</div>
    <p>
      Crafted from 100% organic cotton with a relaxed fit and reinforced
      stitching at the collar and cuffs. Machine washable and pre-shrunk to
      keep its shape wash after wash.
      <a href="/">View full specifications.</a>
    </p>
  </daff-accordion-item>
  <daff-accordion-item>
    <div daffAccordionItemTitle>Shipping and delivery</div>
    <p>
      Free standard shipping on orders over $50. Orders placed before 2pm ship
      the same business day and typically arrive within 3&ndash;5 business
      days. Expedited options are available at checkout.
      <a href="/">See shipping policy.</a>
    </p>
  </daff-accordion-item>
  <daff-accordion-item [disabled]="true">
    <div daffAccordionItemTitle>Customer reviews (0)</div>
    <p>
      No reviews yet. Be the first to share your thoughts once you've tried it.
    </p>
  </daff-accordion-item>
</daff-accordion>

Accessibility

Accordion follows the Accordion WAI-ARIA design pattern.

Daffodil provides

role="button" on titles with aria-expanded to indicate current state and aria-controls linking to the associated panel
role="region" on content panels with aria-labelledby linking back to the corresponding title
Unique IDs autogenerated for titles and panels (overridable via the contentId and itemId inputs on <daff-accordion-item>)

Keyboard interactions

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

Developer responsibilities

Wrap titles in an appropriate heading element (<h2>, <h3>, etc.) so the accordion contributes to the page's heading structure
Provide concise, descriptive title text