How to Add and FAQ Dropdown in Squarespace

I’ve been working on some new pages in the background of my website. I wanted something neat and tidy and didn’t want a run on page where people are left scrolling. I love the look of those Dropdown Accordions that so many big websites use for displaying FAQs?

Well, here's how to add one to your Squarespace site.

The code that I’m using was created by Silvabokis. He has a huge resource library filled with awesome codes and how-to’s. I’ve learned a ton from his site!

01: Adding the Javascript to make the FAQ Accordion open and close

Alright, so to start, you just open up your page in Squarespace and add a Code block. Simply ‘Copy’ and ‘Paste’ the code from below into the code block and click APPLY.

The code:

Screen Shot 2020-11-01 at 3.24.17 PM.png

src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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>

Screen Shot 2020-11-01 at 3.25.03 PM.png

02: Adding Q & A in a Markdown block

Next it’s time to add a Markdown block to you page. Once you do that, you’ll need to also add the text below into the Markdown block.

### + Question 1? Answer Here

### + Question 2? Answer Here

### + Question 3? Answer Here

Screen Shot 2020-11-01 at 3.25.38 PM.png

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:

### + Do you offer coaching sessions? Yes I do! I offer both in person and virtual sessions for individuals or small groups! ### + Question 2? Answer Here ### + Question 3? Answer Here

Now, click Apply!

03: Saving the FAQ Dropdown Accordion

Click DONE on your page (in the upper left hand corner). The site should automatically refresh itself, but if not then you may need to manually refresh your style editor. You can also log out to view your website as a visitor so that you can check if the FAQ Dropdown Accordion and the code is properly working.

It’s that simple!

Screen Shot 2020-11-01 at 3.26.04 PM.png

Not loving the header for your dropdown option? Don’t worry! The ‘###’ in your markdown code 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 ##. You must also go back into the script you added in the code block and change h3 to h2 or h1 as needed! This is very important, or else your markdown FAQ won’t work properly or look right.

I hope you enjoyed this step-by-step blog post and as always, if you’ve used this on your own site, please comment below so I can see your work!