The accordion element in Instant allows you to create expandable and collapsible content sections, commonly used for FAQs, product details, and organizing information. This guide covers inserting accordions, understanding their structure, and configuring their behavior.
Adding an Accordion to the Canvas
Step 1: Open the Insert Panel
Navigate to the Insert panel in the left sidebar.
Step 2: Find the Accordion Element
Hover over the Interactive header. Locate the Accordion element in the options.
Step 3: Drag to Canvas
Drag the accordion element onto your canvas. A pre-made accordion with two items will be inserted.
Accordion Structure
The accordion is constructed from multiple nested layers. Understanding this structure is essential for customization.
Layer Hierarchy
Accordion (parent container)
Item (first accordion entry)
Header
Text
Icon
Content
Text (default)
Item (second accordion entry)
Header
Content
Layer Descriptions
Layer | Description |
Accordion | The parent container holding all items |
Item | A single accordion entry (one per FAQ/section) |
Header | The clickable trigger that expands/collapses the item |
Content | The expandable area revealed when the item is opened |
Customizing Accordion Items
Header Layer
The header contains two default elements that can be fully styled:
Text element — The title or question text
Icon element — The expand/collapse indicator
Both elements can be styled and arranged to your liking.
Content Layer
By default, the content layer contains a text element. However, you can insert any element type:
Row or column containers
Images
Videos
Additional text layers
Any other element
Adding and Managing Items
Adding New Items
Method 1: Right-click on the Accordion layer and select Add New Accordion Item.
Method 2: Right-click on an existing Item layer and select Duplicate.
Rearranging Items
Drag item layers within the accordion to reorder them. The layer order determines the display order.
Important Structure Rules
Critical: Each accordion item must maintain the proper layer hierarchy to function correctly:
Every Item layer must contain both a Header and Content layer
Do not remove or rename these required sublayers
Breaking this structure will cause the accordion to malfunction
Creative Layouts
Reversing Content Direction
By default, content expands downward below the header. To make content expand upward:
Select the Item layer
Move the Content layer above the Header layer in the hierarchy
This allows for more creative accordion designs where content appears above the trigger.
Accordion Settings
Select the Accordion layer to access settings in the right sidebar under the Accordion header.
Preview Navigation
Navigate through accordion items without clicking on the canvas:
Control | Function |
Previous / Next buttons | Cycle through items, opening each one |
Dropdown menu | Jump directly to any item in the accordion |
Open Setting
Control which item is open when the accordion first loads:
Option | Behavior |
First | The first item is expanded by default |
Off | All items are collapsed when the page loads |
Close Setting
Control how items behave when opening new ones:
Option | Behavior |
Auto | Opening a new item automatically closes the previously open item |
Off | Multiple items can remain open simultaneously until manually closed |
Limitations
No Nested Accordions
Note: It is not possible to nest an accordion inside another accordion. Each page can have multiple separate accordions, but they cannot be placed within each other.
Quick Reference
Task | Location |
Insert accordion | Insert panel → Interactive → Accordion |
Add new item | Right-click Accordion layer → Add New Accordion Item |
Duplicate item | Right-click Item layer → Duplicate |
Rearrange items | Drag Item layers in the layer panel |
Preview items | Right sidebar → Accordion → Previous/Next or Dropdown |
Set default open state | Right sidebar → Accordion → Open (First/Off) |
Set close behavior | Right sidebar → Accordion → Close (Auto/Off) |
Reverse content direction | Move Content layer above Header layer |
Structure Requirements
Requirement | Details |
Item structure | Each Item must contain Header + Content |
Nesting | Accordions cannot be nested within each other |
Header contents | Text and Icon (both customizable) |
Content contents | Any elements (text, images, videos, containers, etc.) |