If you're building a website on Squarespace and want a clean, organized way to present frequently asked questions (FAQs), look no further than the accordion block. This versatile feature allows you to hide content under clickable titles, making it easier for visitors to navigate your site without feeling overwhelmed.

Watch the video

Check out the YouTube video below 👇

Six Figure Design Club framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

What Is the Accordion Block in Squarespace?

The accordion block in Squarespace is a collapsible content block that allows users to expand and contract text sections. It’s especially useful for:

FAQ sections
Content-heavy pages
Product details or feature breakdowns
Condensing long-form information

Step 1: Add the Accordion Block to a Page

Navigate to the page where you want to add your FAQs.
Click Edit on the page.
Select Add Block and search for Accordion.
Drag the accordion block into the layout.

Tip: You can use multiple accordion blocks on the same page if you want to break up content into sections.

Step 2: Add and Manage FAQ Items

Once the accordion block is in place:

Click into the accordion to open the editor.
You’ll see items listed - these are your questions and answers.
To add a new FAQ, click the Add button.
To delete an item, click the trash icon.
Reorder items by dragging them up or down.

Each item has two parts:

Title – your question (e.g., “What is your return policy?”)
Description – your answer (e.g., “We accept returns within 30 days…”)

You can also:

Use bold, italic, bullet points, or numbered lists in your answers
Leverage Squarespace AI to help write responses

Step 3: Customize Accordion Design Settings

Once your FAQ content is ready, head into the Design tab of the accordion block. Here are the best practices and recommendations:

Typography & Layout

Title Heading Size: Use H4 for a clean, professional look (H3 may appear too large).
Text Alignment: Keep it left-aligned for readability.
Width: Always set to Large so the accordion uses the full page width.
Padding: Adjust to your site’s style, but medium padding usually works best.

Functionality

Expand First Item: Optional. Usually better to leave this off for cleaner UX.
Allow Multiple Items Open: Leave off to keep the page tidy.
Dividers: Keep them on to visually separate FAQ items.

Advanced Styling (Optional)

Backgrounds: Add color or blur effects to fit your brand.
Borders: Use sparingly for subtle separation.
Blend Mode: Unless you know what you’re doing, it’s safe to skip.

Step 4: Save and Preview

Once you’re satisfied with your FAQ accordion block:

Click Save in the editor.
Preview the live page to ensure the layout and functionality are working as expected.

Test expanding and collapsing to check content spacing and readability.

Why Use Accordion Blocks for FAQs?

Using an accordion block is one of the best ways to:

Improve your site’s usability
Reduce visual clutter
Keep your FAQ sections mobile-friendly
Enhance SEO by organizing content under structured headers

Final Thoughts

The Squarespace accordion block is a simple but powerful tool for presenting FAQs and long-form content in a user-friendly format. With the right setup and styling, it can elevate your site’s design and improve visitor experience.