Squarespace Accordion: How to Add and Style One

To add a Squarespace accordion, click Edit on your page, go to the section you want it in, click Add Block in the top left, and choose Accordion. Then hover the block, click the pencil icon, and add your items.

When an accordion is the right call

Accordions collapse content behind clickable headings so visitors expand only what they care about. They're the right answer for FAQs, shipping and returns, service tiers with detailed inclusions, and anything else that's genuinely reference material.

They're the wrong answer for content that sells. Anything a visitor needs to read to decide whether to buy from you should be visible without a click, because most people won't click. If you find yourself hiding your value proposition in an accordion to keep the page short, the page needs editing rather than collapsing.

Adding the Squarespace accordion block

Click Edit on your page and scroll to the section where the accordion should sit. If you want it on its own, click Add Section and choose Blank, which gives you a clean area to work in.

Click Add Block in the top left corner. Find Accordion in the block list and select it. It drops into the section straight away with placeholder items.

Hover the block and click the pencil icon to open the editor. From there you can add and remove items, edit the text in each one, and change the layout and spacing.

Click Save in the top left when you're happy. The accordion expands and collapses on the live site.

Writing the content so it works

The heading is doing most of the work, because it's the only part most visitors read.

Write headings as the actual question someone would ask. "How long does shipping take?" beats "Shipping." Real questions match how people search, and they tell the visitor whether it's worth expanding.

Keep each answer to a short paragraph. If an item needs four paragraphs, it probably deserves its own page that you link to instead.

And order them by how often they're asked, not by category. The first two items get most of the clicks.

Styling it to match your site

The block picks up your site's fonts automatically, but the spacing and dividers usually need attention to stop it looking like a default component.

In the section's design settings you can adjust padding, colors and type. The things that make the biggest difference are generous vertical padding on each item, so they don't feel cramped, and a divider that's subtle rather than a hard black line.

If you want a specific look, like a custom expand icon, animated arrows or a different open state, that's beyond the panel and into custom code.

The SEO part most people miss

Here's the bit worth knowing. Accordion content is in the page's HTML whether it's expanded or collapsed, so Google reads all of it. Hiding text behind a click doesn't hide it from search.

What an accordion doesn't do on its own is tell Google the content is a set of questions and answers. That takes FAQ schema, which is a snippet of structured data you add through code injection.

Google retired FAQ rich results in 2026, so this won't get you an expanded listing any more. It still helps AI search tools and assistants quote your answers accurately, which is increasingly where this traffic goes. It's part of what I set up on SEO projects, and the same markup runs on the FAQ section of this post.

Frequently asked questions

Does hiding text in an accordion hurt SEO?

No. Collapsed content is still in the page HTML, so Google indexes it normally. Just don't hide anything a visitor needs in order to buy from you.

Can I have multiple accordion items open at once?

The built-in block allows it. If you want strictly one open at a time, that behavior needs custom code.

Is the accordion block available on all Squarespace plans?

Yes on 7.1, where it's a standard block. On 7.0 it isn't available and people usually fake it with code or a summary block.

Should I add FAQ schema to my accordion?

It won't earn rich results any more since Google retired them, but it still helps AI assistants and Bing quote your answers correctly. Cheap to add, still worth it.

Want an FAQ section with proper schema behind it, built to match the rest of your site? That is standard on my builds. Book a free call.

I'm Dylan, the designer behind Highr Labs and a Squarespace Circle Platinum Partner. I build custom Squarespace sites for businesses in Utah and across the US. More about me, or book a free call if you want to talk through a project.