How to install an custom FAQ Dropdown Accordion in Squarespace 7.0 and 7.1

4 Sep

Updated 2022: Squarespace now has a built in accordion block option. However, this method is what I use most of the time as it is way more customisable and the principles here can be used for dropdown text in other places on your site too! Great examples include adding extra info under your services or a dropdown bio under a headshot on your Team or About page.

Seen those Dropdown Accordions that are pretty standard around the web for displaying FAQs? Here's how to add a custom one to your Squarespace site.

This code is created by Silvabokis and used with his permission.

Step One: Adding Javascript to make the FAQ Accordion open and close

Firstly, open up your page in Squarespace and add a Code block. Simply Copy and Paste the code below into the code block and click Apply.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
    $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});
    });
    </script>

Step Two: Adding questions and answers in a Markdown block

Secondly, add a Markdown block to you page. Add the text below (or from the PDF) into the Markdown block.

### + Question 1?
Answer Here

### + Question 2?
Answer Here

### + Question 3?
Answer Here

Here, you can edit the questions and answers. If you'd like to have more or less than three questions, you can paste extra or delete as appropriate. You can add your own text and delete the + sign if you'd like (though this acts as a good indication to a visitor that they should click to open the answer) but don't touch the ###. For example:

### + Question 1?
Answer Here

### + What are your opening hours?
We are open Monday to Friday, 9am-5pm.

Now, click Apply!

Step Three: Saving the FAQ Dropdown Accordion on your site

Click Save on your page. You may need to refresh your style editor or log out and view your website as a visitor to check if the FAQ Dropdown Accordion code is working properly.

And there you have it, how to add an FAQ to your Squarespace site.

Hit save and view your page as a visitor...

Bonus: Changing font styles in the FAQ Dropdown Accordion

The ### styles your questions with the same font style as your Heading 3 in your style editor. If you'd like to use the font style of your Heading 4, use #### and if you'd like to use Heading 2, just use ## instead! Go into the script you added in the code block and change h3 to h2 or h1 as appropriate.