# Accordion block — recipe

**Locked 2026-08-04 as part of a452 Phase 5.**
**Tier:** 3 (generic MIT)

## A. Product Description

An interactive container that organizes content into vertical, collapsible sections. Users click a header to reveal its associated body text, allowing for space-efficient display of multiple data points.

### UI structure

A parent container rendering a list of header elements. Each header contains the section title and an optional chevron icon. The body content is a sibling element hidden by default.

### Layout

Stacked vertical layout. Each accordion item occupies the full width of the container. The body expands to the height of the content inside.

### Geometry

Header height: 48px (line-height 1.5rem). Body padding: 16px 0. Typography for titles: bold, 16px.

### States

Default: All items collapsed, arrow icon rotated 0deg. Expanded: Item open, arrow icon rotated 180deg, body content visible. Disabled: All interactions disabled, styling desaturated.

## B. Structural Contract

### Inputs (props)

- `props.items` — array, default [], description: The list of accordion items containing title and content.
- `props.initialOpen` — number, default -1, description: The zero-based index of the item to open by default.
- `props.allowMultiple` — boolean, default false, description: If true, allows multiple items to be open simultaneously.

### Outputs (events)

- `toggle(index)` — fires when a header is clicked, description: Returns the index of the toggled item.

### Module boundaries

This block does not depend on other blocks. It renders a raw DOM structure that fits into any region.

### Swap-test

To swap this block: replace `modules/accordion.js` with a file exporting the `render(props, slots)` function.

## C. Reconstruction Notes

### Evidence

The block source is `modules/accordion.js`. Trace lines 1–50 to behavior.

### Visual anchors

Root CSS class: `.fvcms-accordion`.

### Behavioural anchors

The block exports `render(props, slots)`. This function creates the DOM node, initializes the local state, and attaches event listeners.

## D. Source-line citations

The implementation is at `modules/accordion.js`.

- Lines 1-10: Import utilities and define prop types.
- Lines 11-20: State initialization logic based on `props.initialOpen`.
- Lines 21-35: Render function to generate header elements dynamically.
- Lines 36-50: Render function to generate body elements and handle visibility classes.
- Lines 51-60: Event listener attachment and final return statement.