Toggle Group
Create expandable content sections with accordions for FAQs and detailed information
Expandable content sections that save space while organizing information. Perfect for FAQs, feature details, or any content that benefits from progressive disclosure. Each toggle can contain any content you can put on a page—including text, images, videos, and even complex column layouts.
Quick Reference
Purpose: Collapsible content sections
Behavior: Click to expand/collapse
Layout: Vertical stack of toggles
Content: Any blocks inside each toggle
Mobile: Touch-friendly interactions
Understanding the Structure
The Toggle block creates a Toggle Group. The menubar lets you add/manage Toggle Items, each with its own clickable Header and collapsible Body.
Adding Toggle Groups
Method 1: Drag from Right Sidebar
Click the Lists category in the right sidebar
Find Toggle list in the dropdown
Drag it onto your page where you want it
Click to edit the header and add content
Method 2: Slash Command
Type
/toggleon empty lineSelect "Toggle Group"
Default group with two empty items appears
Add content inside toggles
Structure
Toggle Item Components
Header: Always visible, clickable text area
Icon: Plus/minus indicator for open/closed state
Content Body: Hidden until expanded, can contain any blocks
Content Flexibility
The power of toggles is that each body can contain most block types:
Text blocks (paragraphs, headings, lists)
Media (images, videos, embeds)
Interactive elements (buttons, forms)
Card groups (collections of cards)
Important: Some blocks cannot be placed inside toggle bodies due to technical limitations:
Column Groups
Testimonial Groups
Slider Groups (slideshows)
Other Toggle Groups (no nested toggles)
Tables
This flexibility still makes toggles perfect for organizing rich, complex content in a space-saving format.
Configuration
Managing Toggle Items
Click Manage Items in the toolbar to:
Add items: Click "+ Add New Item"
Reorder: Drag items to change their order
Remove: Click the trash icon next to any item
Styling Options
Click the color icon in the toolbar to customize:
Background Color: Choose from your brand palette
Background Opacity: Adjust transparency (0-100%)
Text Color: Select manually or use "Auto select text color" for optimal contrast
Common Use Cases
FAQs
Questions as headers
Answers as content
Organized by category
Search-friendly
Feature Details
Feature name as header
Description inside
Screenshots/videos
Technical specs
Tips for Effective Toggle Groups
Write clear headers: Use questions for FAQs, action words for features
Keep headers concise: Front-load the most important information
Order logically: Place most common or important items first
Test on mobile: Ensure headers are easily tappable
Use content variety: Take advantage of the ability to add various block types
Preview regularly: Check how toggles appear in collapsed state
Building Your Toggle Group
Editing Headers
Click on any header to edit the text
Headers are simple text areas
Press Enter while in header to open the toggle body
Keep headers clear and descriptive
Adding Content to Toggle Bodies
Click the toggle header to expand it
Click inside the body area
Add any blocks using slash commands or drag-and-drop
Content is preserved even when toggle is closed
Troubleshooting
Content not showing
Make sure the toggle is expanded (click the header)
Verify content was added inside the toggle body
Check preview mode to see how it appears to visitors
Toggle not expanding
Click directly on the header text or plus/minus icon
Ensure you're not in a nested non-editable area
Try refreshing if the toggle seems stuck
Performance issues
Optimize images and videos inside toggles
Avoid extremely long content in single toggles
Consider breaking very complex content across multiple toggles
Related Features
Last updated