Squarespace: Creating an Accordion Style FAQ Section

Are you looking to have an FAQ page on your website but are finding that the page looks text-heavy from all the questions are answers? Maybe you think it would look better with a collapsible version of the questions and answers instead. Here’s how you can easily achieve that look with a tiny bit of CSS and some jQuery.

Step 1: The code for questions and answers

First, we’re going to go to our FAQ page and insert a MARKDOWN block. Inside we’re going to put the following.

## Question 1
The answer for question 1

## Question 2
The answer for question 2

Feel free to replicate that as needed for more questions.

Step 2: Adding The Functionality

Now we’re going to enter the jQuery code to make this work as needed. Go to SETTINGS > ADVANCED > CODE INJECTION and add the following code.

*If you’re using markdown blocks elsewhere on the website as well and the code affects it, you can instead add this code to the FAQ page’s header code only by clicking the gear icon to the right of the FAQ page name and then click ADVANCED, there’s a field for CODE INJECTION that you can enter the code into instead*

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script>
$('.markdown-block .sqs-block-content h2').addClass('ui-closed').css('cursor','pointer');
$(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
$(".markdown-block .sqs-block-content h2").click(function() {

$(this).toggleClass('ui-closed ui-open');

Step 3: Adding a + and – symbol to the left of questions as they expand and close.

Go to DESIGN > ADVANCED > CUSTOM CSS and enter the following.

.markdown-block p {
.markdown-block .ui-closed:before {
content:"+ ";

.markdown-block .ui-open:before {
content:"- ";


Do you find the questions to be too large because they are H2 tags? If so, you can use the H3 tag instead by add an extra # to the front of the code in STEP 1 so it looks like “### Question 1” instead.

Once you do that, go to the code in STEP 2 and change all the h2 to h3 in the code. There are five instances of h2 which need to be changed to h3.


A special thanks go out to Silva Bokis for his code which was used to create this tutorial. His original post can be seen here.


Want more help? We have tons of YouTube tutorials on customizing your Squarespace website. Subscribe to our channel so you will know when a new tutorial is out.

Vigasan Gunasegaran About the author

I've been working on Squarespace and WordPress websites for quite some time now. I enjoy how easy it is for clients to make updates to their own websites while using a CMS system. Outside of website design, I love good food, Netflix, and video games.

  • This tutorial has been a life saver for me! Thank you – cannot wait to redesign our site.

    April 3, 2019 at 5:06 AM
  • Ngan Nguyen Do

    Amazing, thanks a lot for your help!!

    April 7, 2019 at 7:07 AM
  • Katie

    I’m having a hard time with one part of this code/tutorial – when I bring up the page, the FAQs are by default expanded. Once I refresh the page, they become collapsed (which is what I want from the get-go). What’s happening? Why won’t it appear collapsed initially?

    April 9, 2019 at 5:56 AM
  • Shanna

    Thank you Vigasan for the tutorial – but I am having a problem with my “answers” collapsing. They show-up automatically on the page…collapse for a second…only to reappear. I saw your earlier answer and my AJAX LOADING is unchecked. Any advice?

    May 19, 2019 at 6:09 AM
      • I’m having the same problem. It worked ok for weeks, but today it’s not collapsing. My link is http://windsongcleveland.org/faqs

        Thank you!

        May 30, 2019 at 12:55 PM
  • Is there a way to have an already open question collapse when you expand a new one?

    August 6, 2019 at 9:51 AM
  • My + signs don’t show up either. The link is http://www.amandalalama.com/faq πŸ™‚

    August 15, 2019 at 2:51 PM
  • Laura

    Thank you so much for this! Amazing!! Is there a way to have the first question open? I can’t figure that out! Thank you!!

    September 16, 2019 at 12:51 PM

Leave a Reply