Accordion Component Breakdown

Overview

The dd-accordion component provides a collapsible content structure. It leverages native HTML5 details and summary elements for accessibility and progressive enhancement, ensuring it works without JavaScript in modern browsers while allowing for JS enhancements.

This component is ideal for FAQs, expandable sections, or grouped content. In WordPress, configure it via ACF repeater fields for accordion items (e.g., title and body). In Drupal, use a Paragraph type with fields for header and copy, rendered as a list of items.

Basic Usage

Wrap accordion items in a container with class dd-accordion. Each item uses details with a shared name attribute (e.g., "group1") to enforce exclusive opening (only one open at a time). The summary acts as the toggle, and the content follows in div with a class of class="dd-accordion__copy.

Add spacers (e.g., div class="dd-spacer -xl") between items for visual separation if needed.

Preview

Code

<div class="dd-accordion">
    <div class="dd-accordion__items">
        <details name="group1" class="dd-accordion__item">
            <summary class="dd-accordion__header dd-g -y-center">
                <div class="dd-accordion__title dd-u-1-1">
                    Header Name
                </div>
            </summary>
            <div class="dd-accordion__copy">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </details>
        <details name="group1" class="dd-accordion__item">
            <summary class="dd-accordion__header dd-g -y-center">
                <div class="dd-accordion__title dd-u-1-1">
                    Header Name
                </div>
            </summary>
            <div class="dd-accordion__copy">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </details>
    </div>
</div>

CSS Modifiers (from _dd_accordion.scss)

The SCSS file defines base styles for the accordion, including transitions, icons (e.g., chevrons via pseudo-elements), and hover/focus states. Key modifiers include:

• [open]: Applied to the details element when expanded (via attribute selector [open]). Rotates icons and adjusts borders or backgrounds for visual feedback.
• -primary: Sets the hover and open states to the primary action colors.
• -secondary: Sets the hover and open states to the secondary action colors.
• -tertiary: Sets the hover and open states to the tertiary action colors.
• -borderless: Eliminates borders around items for a cleaner look.
• -compact: Reduces padding and font sizes for denser layouts, useful in sidebars or mobile views.
• Utility classes for alignment. -x-center -y-center
• SAL data attributes for custom animations. data-sal="slide-up"

Framework files

• source/js/vendors/sal.js (animations)
• source/scss/components/_dd_accordion.scss (styles)

For ACF/Paragraphs integration, map fields to generate dynamic item IDs for JS targeting.

Accessibility and Best Practices

Ensure headers are focusable and keyboard-navigable. Use semantic headings in titles if appropriate. Test with screen readers. In CMS, make fields required for titles to avoid empty summaries.