Accordion Block

The Accordion block organizes related information into collapsible items. Visitors scan the titles first, then open only the answer, specification, policy, or detail they need.

Use it for focused FAQs, product details, service information, support topics, and compact groups where every item has a clear trigger and a self-contained answer.

Properties

Select the Accordion and open Edit block to configure its content and behavior. Build the information hierarchy first; styling is easier once the final item count and copy are in place.

Content keeps the optional heading, introduction, and complete ordered item list in one panel.

Heading and intro

Show Heading controls whether the block heading appears. Heading sets its text. Show Intro Text adds a short rich-text introduction above the items; keep it useful and visually secondary.

Accordion items

Each item contains a Title and Content. The title becomes the clickable trigger; the content is revealed when the item opens. Use Add item to create another panel, the arrows to reorder items, and × to remove one.

Write parallel, specific titles. Question-style titles work well for FAQs; concise noun phrases work well for specifications and policies.

Behavior

Behavior determines how many panels may remain open and which symbol communicates the interaction.

Allow Multiple Open lets visitors keep several answers expanded at the same time. Enable it when comparison is useful; disable it for a compact, one-panel-at-a-time disclosure.

Indicator switches the trigger symbol between Chevron and Plus. Chevron emphasizes expand and collapse direction; Plus is a stronger reveal cue. Use one convention throughout the complete component.

Editing an item

Expand an item card in the Content panel to edit its title and rich-text answer without leaving the Accordion settings.

Keep each answer focused on the promise made by its title. Rich text may include emphasis, lists, and links, but essential information should not be buried in an excessively long panel.

Reordering changes the reading sequence immediately. Review the closed titles together before polishing the answers; visitors decide what to open from that first scan.

Style Panel

Open Style to select an Accordion area, breakpoint, and state. Style Presets can carry the same treatment across multiple Accordions.

Body

Body controls the gap between items and the component boundary. Use the gap to establish rhythm, then add a subtle border only when the Accordion needs clearer separation from the page surface.

Breakpoints and states

Choose Desktop, Tablet, or Mobile before changing a responsive value. Default defines the resting appearance. Hover + Active defines the shared interactive treatment for hovered triggers and open items.

Heading and intro

Heading and Intro expose typography controls for their own text. Keep the heading prominent and the introduction secondary; neither needs an interactive state because neither is a trigger.

Item Title

Item Title styles the trigger surface and title typography. Default controls the collapsed presentation. Make every title readable as a standalone control and leave enough inset for long labels and the indicator.

Item Content

Item Content styles the revealed answer panel. Its background and typography should connect visually to the active title while keeping a clear boundary between trigger and answer.

Hover + Active

Use Hover + Active to coordinate the interactive title background, typography, and transition.

The open title must remain readable against the active background and should still look related to the closed items. Use restrained transitions so the state change is clear without delaying access to the answer.

Motion

Animation Effects controls the Accordion’s entrance into the page. It is separate from the built-in open and close interaction. Use an entrance effect only when it supports the page sequence; the block remains fully functional with None.

Interactive example

Open the items below to compare the collapsed and expanded states. This example allows multiple panels to remain open and uses the chevron indicator.

Each title is a trigger, each answer expands inside the same component, and the block height follows the currently visible content.

Property summary

Content: Show Heading, Heading, Show Intro Text, Intro Text, and Accordion Items.

Behavior: Allow Multiple Open and Indicator, with Chevron or Plus.

Style areas: Body, Heading, Intro, Item Title, and Item Content. Interactive styling is available on meaningful hover and active states.

Responsive behavior

Accordion follows the available width. Titles wrap as needed, answers add natural height when opened, and the page content below moves down. In a grid section, keep the frame compact and use section padding or grid gaps for surrounding whitespace.

Accessibility

Write descriptive titles, preserve a visible focus treatment, and test every item with a keyboard as well as a pointer. Maintain readable contrast in closed, hover, active, and open states.

Do not hide information every visitor must see immediately, and avoid placing the only path to an important action inside a long answer.

Common mistakes

Avoid vague titles, repeated questions, unrelated answers, excessive motion, and enabling multiple open panels when the added height makes scanning harder.