VN Toggle

What It Does

Creates expandable/collapsible content sections where users click a heading to reveal or hide content beneath it.

When to Use It

• FAQ sections where visitors can browse questions and expand answers
• Product feature lists that would be overwhelming if shown all at once
• Step-by-step instructions where users can focus on one step at a time
• Policy or legal information organized into sections

How to Add This Module

1. In the page builder, find "VN Toggle" in the module list
2. Drag it to where you want it on the page
3. Click on it to open the settings panel

Settings Explained

Toggle Items

This is a repeater - you can add as many toggles as you need.

Setting	What It Does	Options
Heading Text	The clickable text that users click to expand/collapse	Any text
Toggle Content	The content that appears when expanded	Rich text (supports bold, italic, links, lists)
Start Expanded	Whether this toggle is open when the page loads	On/Off

Heading Styles

Controls how all toggle headings look.

Setting	What It Does	Options
Heading Level	The HTML tag for SEO purposes	H2, H3, H4, H5, H6
Heading Size	Visual size of the heading	Extra Small, Small, Default, Large
Heading Color	Text color of headings	Black, White, Primary

Content Styles

Controls how the expanded content looks.

Setting	What It Does	Options
Text Color	Color of the body content	Black, White
Text Size	Size of the body text	Extra Small, Small, Medium, Large, Extra Large

Toggle Settings

Controls the behavior of all toggles.

Setting	What It Does	Options
Show Toggle Icon	Display a chevron arrow that rotates when clicked	On/Off
Animation Speed	How fast the content expands/collapses	Fast (150ms), Default (300ms), Slow (500ms), No Animation
Accordion Mode	Only allow one toggle open at a time	On/Off

Example Setups

Example 1: FAQ Section

1. Add 5-6 toggle items
2. For each item:
   • Heading Text: "What is your return policy?"
   • Toggle Content: Your detailed answer
   • Start Expanded: Off (keep all closed initially)
3. In Toggle Settings:
   • Accordion Mode: On (so only one answer shows at a time)
   • Animation Speed: Default
4. In Heading Styles:
   • Heading Level: H3
   • Heading Size: Default

Example 2: Product Features

1. Add toggle items for each feature
2. For the first item:
   • Start Expanded: On (show one feature immediately)
3. For other items:
   • Start Expanded: Off
4. In Toggle Settings:
   • Accordion Mode: Off (let users open multiple features)

Tips

• Use Accordion Mode for FAQ sections to keep the page tidy
• Keep headings short and descriptive so users know what to expect
• Set your most important toggle to "Start Expanded" so visitors see key content immediately
• Use consistent heading styles across all your toggles for a professional look