How to install an FAQ Dropdown Accordion in Squarespace

 Adding an FAQ to Squarespace. Tutorial video.
 

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

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

You can download a PDF copy of the code, with instructions here

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 from the PDF or below into the code block and click Apply.

addacodeblocksquarespace.png

<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

 adding a squarespace markdown block
 Add your questions and answers...

Add your questions and answers...

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. Remember, you can download a PDF with the code and instructions here.

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

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 1, use # and if you'd like to use Heading 2, just use ## instead!