Skip to main content

Accordion

Accordion is the widget for progressive disclosure in a vertical stack.

Use it when a screen has secondary details that should stay available without overwhelming the first read. Common examples are advanced filters, shipping details, frequently asked questions, or email metadata that should not occupy full height all the time.

Example​

use fission::prelude::*;

let node = Accordion {
    items: vec![
        AccordionItem {
            title: "Details".into(),
            content: details_node,
            is_expanded: view.state.details_open,
            on_toggle: Some(toggle_details_action),
        },
        AccordionItem {
            title: "History".into(),
            content: history_node,
            is_expanded: view.state.history_open,
            on_toggle: Some(toggle_history_action),
        },
    ],
}
.build(ctx, view);

The widget only reflects state. If your product wants exactly one section open at a time, that rule belongs in the reducer. If your product wants several sections open together, that also belongs in the reducer.

Field table​

FieldTypeMeaningNotes / default behavior
itemsVec<AccordionItem>The sections to render from top to bottom.Defaults to an empty list.

State ownership and behavior​

Accordion does not own expansion state. Each item brings its own is_expanded flag and on_toggle action. That means the widget does not enforce a single-open pattern, does not remember the last opened section, and does not silently mutate anything on its own.

The checked-in renderer builds each header as a ghost button and places the expanded content in a second container underneath it. This produces a clear stacked presentation, but it also means each expanded item is two visible blocks rather than one animated height transition.

Specific advice​

An accordion should reduce scanning cost, not hide essential content. If users must open every section just to finish the main task, the layout probably wants tabs, a stepper, or a simpler single-column flow instead.

AccordionItem, Tabs, Stepper, and Card.