All Patterns

Delay Accordion

Configuration Options

This pattern supports configuration via data attributes on the root .delay-accordion element:

Attribute Default Description
data-delay-enabled “true” Enable/disable auto-advance timer
data-delay-speed “3000” Duration in milliseconds before advancing
data-progress-position “horizontal” Progress bar orientation: “horizontal” or “vertical”
data-collapse-description “false” Hide tab descriptions until tab is active/expanded

Progress Bar Orientations

  • horizontal: Progress bar at the bottom of each tab, animates left-to-right
  • vertical: Progress bar on the left side of each tab, animates top-to-bottom

Both orientations display a var(--neutral-light) track with a var(--primary) fill that animates based on the delay speed.

Collapse Description Mode

When data-collapse-description="true", tab descriptions are hidden by default and only reveal when that tab is active. This creates a cleaner initial appearance showing only tab titles, with descriptions expanding on interaction.

  • Descriptions animate with max-height and opacity transitions (0.4s)
  • Includes proper aria-hidden attributes for accessibility
  • Works in both expanded and compact modes

Using Etch Props

To make these attributes configurable via the Etch UI, use props syntax:

data-delay-enabled="{props.autoAdvance}"
data-delay-speed="{props.duration}"
data-progress-position="{props.progressPosition}"
data-collapse-description="{props.collapseDescription}"

Then define autoAdvance (boolean), duration (number), progressPosition (select: horizontal/vertical), and collapseDescription (boolean) as component props.

Container Query Implementation

This pattern uses container queries instead of media queries for responsive behavior. This means the layout responds to its available space, not the viewport width.

How It Works

  • .delay-accordion__container has container-type: inline-size
  • Child elements use @container (max-width: 900px) queries
  • JavaScript uses ResizeObserver to track container width

Benefits

  • Pattern works correctly in sidebars, modals, or narrow layouts
  • Responds to actual available space, not device width
  • No need to manually declare parent as container (handled internally)

Behavior

  • Expanded mode (>900px container): 2-column layout, auto-advances with progress bar
  • Compact mode (≤900px container): Stacked accordion, click to expand, images inside tabs
  • Editor: No auto-advance, click to expand works normally
  • Click any tab: Stops auto-advance timer, fills progress bar to indicate selection

Changelog

  • January 19, 2026: Updated to make more accessible, ensuring keyboard nav works, add proper aria roles.