When a section has too much content to show at once, the Accordion and Tabs elements let you break it into scannable, interactive chunks. Accordions stack collapsible items vertically; tabs switch between panels behind a horizontal menu.
Insert an accordion or tabs
Open the Insert panel from the left sidebar.
If the panel is showing templates, click Switch to elements.
Open the Advanced category and expand Interactive.
Click or drag Accordion or Tabs onto the canvas.
Instant inserts a complete structure — headers, content areas, and (for tabs) a menu row — so you can start adding copy and styling right away.
Work with accordions
An accordion contains one or more Item layers. Each item holds:
Header — the clickable title row. The preset includes a caret icon that rotates when the item opens.
Content — the body that expands and collapses.
Select the top-level Accordion layer to configure its behavior in the design panel:
Open — First starts with the first item expanded; Off starts with every item closed.
Close — Auto closes other items when one opens; Off lets multiple items stay open at the same time.
Use the Preview control in the design panel to step through items with the arrow buttons or jump to a specific one with the Open item menu, so you can style each panel's open state without publishing.
To add more entries, duplicate an existing Item in the Layouts & layers panel, then update its header and content text.
Work with tabs
Tabs use their own structure in the Layouts & layers panel:
Tabs menu — the row that holds the tab buttons.
Link — each individual tab button, inside Tabs menu.
Tabs content — the area that holds the panels.
Tab — each panel's content, inside Tabs content.
Select the Tabs layer and use the Preview control to open a specific tab while designing. Style the Link buttons and Tab panels independently — for example, give the active tab an underline and mute the inactive ones.
Tabs work well for product details split into overview, shipping, and reviews. Accordions suit FAQ sections and mobile layouts where vertical stacking reads more naturally.
Styling and content tips
Keep accordion headers short — they are the only visible text when items are collapsed.
Limit tabs to four or five labels; more than that gets cramped on mobile.
Use consistent padding inside Content and Tab layers so open states feel balanced.
Both elements support the same position, spacing, and visibility controls as other Instant elements.