Skip to main content

Accordion

The Accordion section helps you organize content into clean, collapsible panels that expand when clicked. It’s perfect for FAQs, step-by-step guides, product details, policies, and any content that benefits from being structured and easy to scan.

Written by David Rose
Updated this week

What Is the Accordion Page Builder Element?

An accordion displays a list of item titles stacked vertically. When a customer clicks a title, the content expands below it. Multiple items can be open at the same time.

Great for:

  • Frequently Asked Questions (FAQs)

  • Step-by-step tutorials

  • Product specifications

  • Shipping & return policies

  • Event schedules

  • Legal pages (Terms, Privacy Policy)

  • Troubleshooting guides

In this article...

We will go over:

How to Add an Accordion Element Using the Page Builder

  1. Go to Admin > Pages

  2. Select the page you want to edit

  3. Scroll to the page builder area

  4. Drag the Accordion section from the left-side section dock onto your page

  5. Click Save

Accordion Settings

Section Title (Optional)

This appears above your accordion items.

Examples:

  • Frequently Asked Questions

  • Getting Started

  • Returns & Exchanges

You can leave this blank if the items are self-explanatory.

Section Subtitle (Optional)

This appears directly below the title and provides additional context.

Examples:

  • Click a question to view the answer

  • Follow these steps to set up your account

Keep it short and clear — one sentence is ideal.

Adding Accordion Items

Click “Add an Item +” to create each new panel. You can add as many items as needed.

Each item includes:

Item Title (Required)

This is the clickable heading customers see.

Best Practices:

  • Keep it clear and specific

  • Use questions for FAQs

  • Use action-based titles for guides

  • Aim for 5–10 words

Good Examples:

  • What is your return policy?

  • How long does shipping take?

  • Step 1: Create Your Account

  • Technical Specifications

Avoid:

  • Vague titles like “Information”

  • Very long sentences

  • ALL CAPS

Item Description (Required)

This is the content that appears when the item is expanded.

You can include:

  • Plain paragraphs

  • Bold text using <b> or <strong>

  • Italic text using <i> or <em>

  • Bulleted lists using <ul><li>

  • Numbered lists using <ol><li>

  • Line breaks using <br>

  • Links using <a href="URL">Link text</a>

If you're not an HTML expert, don’t worry — the system automatically corrects most common formatting mistakes.

Reordering Items

To change the order:

  1. Click and hold the drag handle (≡) on the left side of the item

  2. Drag it to the desired position

  3. Click Save

The order in the admin panel matches the order on the live page.

Deleting Items

Click the red trash icon in the top-right corner of the item.

There is no undo, so confirm before deleting.

How It Works for Customers

On the live page:

  • Customers see all item titles stacked vertically

  • Clicking a title expands the content

  • Multiple items can remain open at once

  • Clicking an open item collapses it

Accordions are fully mobile-friendly and work especially well on smaller screens.

When to Use Accordion vs. Tabbed Content

Use an Accordion when:

  • Content is sequential (step-by-step)

  • Customers may need multiple sections open

  • You have 6+ items

  • It’s Q&A-style content

Use Tabbed Content when:

  • Content categories are parallel

  • Only one section should be visible at a time

  • You have 3–6 clearly distinct categories

Design & Content Tips

Ideal Number of Items

  • 3–5 items → Focused content

  • 6–10 items → Full FAQ or guide

  • 11–20 items → Organize carefully

  • 20+ items → Consider splitting into multiple sections

Writing Strong FAQ Content

  • Use real customer questions

  • Lead with the most important information

  • Keep answers concise

  • Use bullet points when listing multiple details

  • Link to related resources when helpful

Writing Step-by-Step Guides

  • Number steps in the title

  • Focus each item on one action

  • Use numbered lists for substeps

  • Include time estimates when helpful

  • Add troubleshooting at the end

SEO Benefits

Accordions are excellent for SEO because:

  • All content is visible in the page’s HTML

  • Structured question-and-answer formats help with featured snippets

  • Keywords in titles improve relevance

  • Organized content increases time-on-page

Troubleshooting

Items Aren’t Expanding

  • Confirm you clicked Save

  • Refresh your browser (Cmd+Shift+R or Ctrl+Shift+R)

  • Ensure every item has both a title and description

Content Looks Broken

  • Check that HTML tags are properly closed

  • Remove formatting copied from Word or Google Docs

  • Paste as plain text first, then format

Items Appear in the Wrong Order

  • Verify the order in the admin panel

  • Click Save after reordering

  • Clear site cache if applicable

HTML Tags Are Showing as Text

Make sure tags are formatted correctly:

Correct:

<b>Bold text</b>

Incorrect:

<b>Bold text

Best Practices Checklist

Before publishing, confirm:

  • Clear, descriptive item titles

  • Complete and accurate descriptions

  • Properly closed HTML tags

  • Logical item order

  • Working links

  • No typos

  • Tested on desktop and mobile

  • Changes saved

Need Help?

If you run into any issues:

Support Options

When contacting support, include:

  • Page URL

  • Screenshots

  • Description of the issue

  • Browser and device details

Did this answer your question?