Accordions

Updated 3 months ago

The Accordions block renders a full-width stack of collapsible rows, typically used as an FAQ list. Each row is a disclosure: its heading expands the content below it when clicked, and every row starts closed unless you enable its Open by default setting.

In the theme editor, add the Accordion block to a section, then fill it with Accordion row blocks.

Settings

The Accordion block's own settings control the color scheme, content alignment, spacing, and device visibility of the whole accordion.

Setting	Description	Default
Enable color scheme	Turns on the block's color scheme. The scheme applies only when this is enabled and a scheme is chosen.	Off
Colors	The color scheme applied to the block.	Scheme 1
Content alignment on desktop / on mobile	Horizontal alignment of the rows' content.	Left
Margin top (Desktop) / (Mobile)	Space above the block, from 0 to 34.	0
Hide block on desktop / on mobile	Hides the block on the chosen device.	Off

The Accordion icon style setting in the theme's color settings controls the expand/collapse icon shown on each row: Top arrow and bottom arrow (the default) or Plus and minus.

Block: Accordion row

Each row is one collapsible item with its own heading and content. Its content area accepts any theme or app block, but a row renders only when its Heading is filled in, and its content shows only when the row contains nested content.

Setting	Description	Default
Heading	The row's clickable heading. Leaving it blank hides the row.	Accordion Heading
Heading size	Visual size of the heading, from XX-Large down to Body.	H6
Heading level	The semantic heading tag used for the row, Heading 1 to Heading 6. It is independent of the visual size.	H3
Use body font family	Styles the heading with the body font instead of the heading font. Only available when Heading size is not set to Body.	Off
Remove heading shadow	Removes the heading's shadow. Only available when Heading size is not set to Body.	Off
Show left icon	Shows an icon to the left of the heading. The icon renders only when this is on and a Left icon name is chosen.	Off
Left icon name	The icon shown next to the heading, such as Check, Caret, or Plus.	Check
Open by default	Whether the row starts expanded rather than collapsed.	Off
Show content on card	Displays the row's content on a card.	On
Enable color scheme / Colors	Applies a color scheme to the row. The scheme applies only when enabled and a scheme is chosen.	Off / Scheme 1
Content alignment on desktop / on mobile	Horizontal alignment of the row's content.	Left
Hide block on desktop / on mobile	Hides the row on the chosen device.	Off

Adding an Accordion block comes with three preset rows — Question 1, Question 2, and Question 3 — prefilled with placeholder content, with only Question 1 open by default.

FAQ

How do I add an accordion FAQ list in the Pops theme?

In the theme editor, add the Accordion block to a section, then fill it with Accordion row blocks. The block renders a full-width stack of collapsible rows, typically used as an FAQ list.

How do I make an accordion row start open in Pops?

Turn on the row's Open by default setting. Every row starts closed unless you enable this setting.

Why is my accordion row or its content not showing in Pops?

A row renders only when its Heading is filled in — leaving it blank hides the row. Its content shows only when the row contains nested content.

How do I change the expand/collapse icon on accordion rows?

Use the Accordion icon style setting in the theme's color settings. Choose Top arrow and bottom arrow (the default) or Plus and minus.

What rows come with a new accordion block in Pops?

Adding an Accordion block comes with three preset rows — Question 1, Question 2, and Question 3 — prefilled with placeholder content, with only Question 1 open by default.

What settings does the Pops accordion block control?

The block's own settings control the color scheme, content alignment, spacing, and device visibility of the whole accordion.

Was this helpful?