Adding an FAQ accordion to a Squarespace website

Accordion blocks are the best way to display FAQs on a website but did you know that it’s a fairly recent addition to Squarespace?

That’s right, until around 12 months ago accordion blocks weren’t a native feature and required custom code.

In this tutorial I’ll talk you through how to add an FAQ accordion block to a Squarespace website.

Watch the video

Check out the YouTube video below 👇

Firstly, head to the page that you want to add your accordion block to and add a blank section. 

View fullsize

Within your section select Add Block and add an accordion block to your section.

Once you’ve added the block you can drag and drop it to change its size and position on the page.

View fullsize

In order to edit the content of the accordion, double click it and in the panel that appears you can edit your content.

Click each accordion item and in the title box you can add your question, and in the description box your answer.

View fullsize

You can also add more accordion items and change their order by dragging and dropping them in the list.

There’s a bin icon next to each element in case you want to remove a question from your FAQs.

View fullsize

---

📩 Join the inner circle to get exclusive code updates

---

You can then switch to the design editor by clicking Design in the top left corner of the panel and here you can change how your accordion looks.

Here you can change the size of your text for both your questions and answers, your text alignment and padding etc.

There are also options you can toggle on such as expanding the first item in the list as soon as a user lands on the page or allowing multiple items in the accordion block to be open at the same time.

You can also play around with the dividers between each section, depending on the design look you want to create.

In this panel you can also choose between an arrow or plus sign and play around with how you want the icons to appear as well as adding a color or custom background to your accordion block.

Once you’re happy with how everything looks and you’ve added in all of your FAQs, hit save and you’ll have added an FAQ accordion to your Squarespace website. 

The trick here is to have a play around with the different editing options until you create the accordion you imagined.

Try it for yourself and let me know how you get on!

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?