Creating an FAQ Section

What You'll Build

An expandable FAQ (Frequently Asked Questions) section where visitors can click to reveal answers. This accordion-style layout keeps your page organized and helps visitors find information quickly.

Before You Start

• Compile your most common customer questions
• Write clear, concise answers for each
• Organize questions from most to least important
• Consider grouping related questions together

Step-by-Step Instructions

Step 1: Add the VN Toggle Module

1. In the page editor, click the Add button in your desired section
2. Search for VN Toggle
3. Click to add it to your page

What you'll see: A single toggle item ready to customize.

Step 2: Configure Your First FAQ Item

1. Find the Toggle Items group
2. Click on the first toggle in the list
3. Enter your Heading Text (the question):
   • Write the question clearly
   • Example: "How long does shipping take?"
4. Enter your Toggle Content (the answer):
   • Use the rich text editor
   • Format with paragraphs, lists, or links as needed
   • Keep answers concise but complete
5. Set Start Expanded:
   • Toggle ON if you want this item open by default
   • Usually leave OFF so visitors choose what to read

What you'll see: A collapsible question with your content.

Step 3: Add More FAQ Items

1. Click the + Add button below the toggle list
2. Repeat Step 2 for each question/answer pair
3. Drag items to reorder them
4. There is no maximum limit - add as many as needed

What you'll see: Multiple FAQ items stacked vertically.

Step 4: Configure Heading Styles

1. Open the Heading Styles group
2. Set the Heading Level (H3 recommended for FAQ items)
3. Choose the Visual Size (how large headings appear)
4. Select Heading Color to match your design

What you'll see: Consistent heading styling across all FAQ items.

Step 5: Configure Content Styles

1. Open the Content Styles group
2. Choose Text Color for answer text
3. Set Text Size (small, medium, or large)

What you'll see: Answer text styled according to your settings.

Step 6: Configure Toggle Behavior

1. Open the Toggle Settings group
2. Configure these options:

Show Toggle Icon:

• Toggle ON to display chevron arrows that rotate
• Recommended: ON for clear visual feedback

Animation Speed:

• Fast (150ms): Quick, snappy transitions
• Default (300ms): Balanced speed
• Slow (500ms): Gentle, deliberate transitions
• No Animation: Instant open/close

Accordion Mode:

• Toggle ON: Only one FAQ can be open at a time
• Toggle OFF: Multiple FAQs can be open simultaneously
• Recommended: OFF for FAQs so visitors can compare answers

What you'll see: Toggle behavior matching your settings.

Common Settings

Setting	What It Does	Recommended Value
Heading Level	HTML semantic level for questions	H3 for FAQ items within a section
Visual Size	How large headings appear	Default or match your design system
Show Toggle Icon	Display rotating chevron	ON for clear affordance
Animation Speed	Open/close transition speed	Default (300ms)
Accordion Mode	Only one open at a time	OFF for FAQs (allows comparison)
Start Expanded	Open by default	OFF for most items, ON for most important

Tips and Best Practices

• Front-load important FAQs at the top of the list
• Keep question text concise (under 10 words when possible)
• Use numbered lists or bullet points in answers for scannability
• Include links to relevant pages when helpful
• Consider having one FAQ expanded by default to show visitors how it works
• Group related questions together using section headings above toggle groups

Writing Effective FAQ Content

Good question format:

• "How do I reset my password?"
• "What payment methods do you accept?"
• "Can I cancel my subscription anytime?"

Avoid:

• "Password" (too vague)
• "What is the procedure for initiating a password reset request?" (too wordy)

Good answer format:

• Start with a direct answer
• Provide additional details if needed
• Include links to resources or contact information
• Use formatting (lists, bold) to improve scannability

Troubleshooting

Problem: Toggle does not open when clicked. Solution: Check for JavaScript errors on the page. Try refreshing the editor or publishing to test on live page.

Problem: Toggle icon is not showing. Solution: Verify that "Show Toggle Icon" is toggled ON in Toggle Settings.

Problem: All toggles open together. Solution: This might be correct behavior if Accordion Mode is OFF. Turn ON Accordion Mode if you want only one open at a time.

Problem: Animation looks jumpy. Solution: Try changing Animation Speed to "Slow" or "No Animation" to see if performance improves.

Problem: Text is hard to read inside the toggle. Solution: Check Content Styles and ensure Text Color contrasts well with your background.

Problem: Heading levels seem wrong for SEO. Solution: Adjust Heading Level in Heading Styles. Use H3 if your section already has an H2 heading above the FAQs.

Problem: Too many FAQs making page too long. Solution: Consider splitting into categories on separate pages, or creating a dedicated FAQ page.