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

You've probably seen a few websites out there that offer a cool accordion-style dropdown for their FAQ pages, where you click the question and the answer gracefully appears below. I'm going to show you how to do this quickly and easily on your Squarespace photography website. 

But, first...

Why do I need an FAQ page?

As a photographer, it's great to give your potential clients plenty of information to help them feel confident about the decision to hire you. Things like "do you travel?" or "what should I wear for an engagement shoot?" 

Not only do these types of questions and answers position you as an expert photographer who knows your stuff, it's also great for SEO (search engine optimization). By adding more content to your website, you are increasing your chances of showing up in search, especially when the content is very relevant to the type of client you want to attract. 

How do I create an FAQ page?

STEP 1: Add Code to Your Website

First, login to your Squarespace dashboard. Click on SETTINGS and scroll down to ADVANCED under the website section. Now choose, CODE INJECTION. 

You should see the word HEADER and then a text box below like this. 

Now paste the following code in that box and hit save. 

<!-- Dropdown Accordion Code -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

STEP 2: Add Code to Your Page Header

Now go back to the PAGES section of your Squarespace dashboard that lists out your navigation. Find the page you'd like to add the FAQ to and click the little gear icon that appears next to the name of that page. 

Choose ADVANCED, and then copy and paste the following code into the PAGE HEADER CODE INJECTION section. 

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

Hit save. 

STEP 3: Add/Format Your FAQ

Go to edit your page content and add a new MARKDOWN block where you want your FAQ to go on your page. 

Now a text box will pop up and here is how you format the FAQ as shown below. 

Add in your questions and answers. Then add two hash signs and a space before each question (## ). The answers can stay as is. I added a "+" sign after the question to denote that it's a drop down but you could also use a ">" symbol or anything you'd like. 

adding-faq-to-squarespace-code.gif

STEP 4: Test it Out

Now that you've got everything properly setup, remember that you won't be able to see this in action while you are logged in to your squarespace site. Instead, I recommend opening a new "incognito window" if you are using Google Chrome or using "private browsing" if you are using Safari.  It should look something like this. 

Did you like this tutorial? Let me know in the comments. Also feel free to ask questions if you have any trouble getting this up and running.