How to Add a Dropdown Accordion-Style FAQ to Your Squarespace Website

Before we dive in, I wanted to mention some of the reasons you might want to add an accordion style drop down to your website. These expandable and collapsible sections are super handy when you have a large amount of content on one page. Instead of forcing people to scroll all the way down your page to find the content they’re looking for, you can have all of these sections collapsed so they can scroll through quickly and only expand the questions that they want to see the answer to.

It’s also kind of a cool, impressive feature to add to your site if you want to show off your Squarespace skills. Any of the code mentioned in this video, and yes, there is a little bit of code in this video, but don’t feel overwhelmed because everything is ready for you to copy and paste in the associated blog post.

Here’s an example of what the finished product looks like. This is a really simple example here, where I’ve got four different questions. And if I click on any of them, it’s going to expand to show you the answer. And then if I click on it again, it’s going to collapse that section. So it just keeps your site really clean.

The very first step is going to be to click the gear icon. Next to the page that you want to put your FAQ dropdown on head over to advanced, go into the header code injection and paste the code from this blog post into the section here. You can also add this to every page on your Squarespace website, by going into your main Squarespace site settings, go to advanced and code injection there.

But for this example, we only want it on one page. So I’m just going to be again, clicking on that gear icon. And adding the code injection to this specific page. Next I’ll hit save, and I’ll show you how to add in your frequently asked questions. You can add this to any existing page on your website or create a new page and add a section there.

In this example, I’m going to be creating a new page to test with. So we’re going to click add section. I’m just going to do a blank section here. And then instead of using a text block for my FAQ’s, I actually am going to use a, what’s called a markdown block. You can see a little M and the down arrow.

So we’re going to choose markdown here. And this is a special kind of text box that gives you a little bit more flexibility. And this is the only block that this code is going to trigger the FAQ dropdown. Okay. So, what I’m going to do is first, I’m going to add three hash symbols, which shows that I’m creating a heading three.

And then I’m going to add my question here. So here is my question. I’m going to enter down and in this section, I am going to write my answer. So that’s really as simple as it is, and I might copy and paste this and do it a couple different times. And you can see it’s adding it here and don’t worry if it doesn’t look great right away in the preview, you have to hit, save and view the live version of your website to see the finished product.

So we’ll hit apply. Done. And now it’s time to add some custom CSS. To add in your custom CSS. You’re going to click on design and scroll all the way down to custom CSS here. And don’t worry if you have other content in here, or if it’s blank, just scroll all the way to the bottom and paste in the content that I have in the blog post.

So once you’ve got that CSS in here, you don’t really have to know what this is going to do, but it is triggering the exact code that we had added to the page ahead of time. So you can see I’ve added a little FAQ comment here, just so later on, when you look at this, do you remember what it was for? You can change the font size of the question itself I’ve created, or I’ve set the font size to 20 pixels, but you can again, make that whatever you want it to be.

Um, I’ve added a little bit of padding. These are just some style settings that I’ve chosen. The main thing you’re going to want to pay attention to is the font size for your H3 or your question, and then all the way at the bottom here, just for fun. I actually changed the color of the question to purple when it’s clicked on.

So you can add a hex code in here. You can change the color. Customize this play around with it. Worst case scenario, you break it, you just delete it. And repaste in what I gave you in the post. Really, really simple. And that’s pretty much it. Now you can have fun testing it out for yourself. If you enjoyed this video, make sure to leave a comment and let me know and subscribe.

So you don’t miss any videos we put out in the future. Thanks for watching.