Collapse

Collapse is a lightweight utility for showing and hiding content without requiring a full Accordion component. It is ideal for expandable cards, "Read more" sections, advanced filters, mobile navigation groups, and contextual content that should remain hidden until requested.

Unlike Accordion, Collapse does not manage groups of panels. It focuses on a single expandable region and exposes lifecycle events for advanced integrations.

All collapse interactions are powered by the FrontAlign runtime.

Quick reference

Feature	Attribute / Class	Purpose
Trigger	`fa-toggle="collapse"`	Turns an element into a collapse trigger.
Target	`target-collapse="#id"`	Specifies the content panel to control.
Open state	`.opened`	Applied to active triggers and panels.
State attribute	`data-state`	Reflects open or closed state.
Accessibility	`aria-expanded`, `aria-controls`	Improves screen reader support.

Usage

<button
  fa-toggle="collapse"
  data-target="#details">
  Show details
</button>

<div id="details" class="collapse">
  Additional content goes here.
</div>

Result

Additional content goes here.

Common patterns

<button
  fa-component="collapse" fa-toggle="collapse"
  target-collapse="#article-more">
  Read more
</button>

<div id="article-more" class="collapse">
  Hidden article content...
</div>

Advanced filters

<button
  fa-toggle="collapse"
  target-collapse="#filters">
  Advanced filters
</button>

<div id="filters" class="collapse">
  Filter controls...
</div>

Expandable card

<div class="card">
  <button
    fa-toggle="collapse"
    target-collapse="#card-details">
    View details
  </button>

  <div id="card-details" class="collapse">
    Card details...
  </div>
</div>

Runtime behavior

Collapse automatically manages:

Capability	Description
`opened`	Applied when the panel becomes visible.
`aria-expanded`	Updated automatically on the trigger.
`aria-controls`	Links the trigger to its controlled panel.
`data-state`	Reflects `open` or `closed`.

Collapse events

Collapse emits lifecycle events that can be used to integrate analytics, custom UI logic, or application state.

document.addEventListener('fa.collapse.opened', (event) => {
  console.log(event.detail.target);
});

Event	Description
`fa.collapse.open`	Fires before opening and can be cancelled.
`fa.collapse.opened`	Fires after the panel becomes visible.
`fa.collapse.close`	Fires before closing and can be cancelled.
`fa.collapse.closed`	Fires after the panel is hidden.

CSS reference

.collapse {
    display: none;
}

.collapse.opened {
    display: block;
}

Accessibility

FrontAlign Collapse follows disclosure-style accessibility patterns.

Use a native <button> element as the trigger whenever possible.
Provide meaningful trigger labels.
Allow keyboard users to access all hidden content.
Keep collapsed content relevant and discoverable.

When to use Collapse vs Accordion

Use Collapse	Use Accordion
Read more sections.	FAQ groups.
Expandable cards.	Settings categories.
Advanced filters.	Grouped documentation sections.
Custom show/hide content.	Single-open content groups.