Add an Accordion Dropdown in Squarespace using CSS

 You've most likely seen a website that offers a unique, accordion-style dropdown menu for their "Frequently Asked Questions" page, where you click the question and the answer appears below. I'm going to show you a simple method on how to easily integrate a Squarespace Accordion menu into your website.

+ What is an Accordion Menu?

This is where your answer will go.

+ Why do I need FAQ's?

They are great to show your expertise to potential clients.

+ I can do this in Squarespace?!

Yes! And it's simple to do.

+ Okay I think I'm ready.

Let's get to it!

 

Why do I need a Squarespace Accordion (FAQ drop down)?

As a professional business owner, it's important to provide your potential clients with enough information to help them make an informed decision. Not only do these frequently asked questions and answers help position you as an expert in your field, they are great for search engine optimization (SEO). By adding more relevant content to your Squarespace website, you are increasing your chances of showing up in Google’s search results (which is the ultimate goal!).

 

How to create a Squarespace Accordion

Step 1: Add code to your Squarespace website

First, you'll need to login to your Squarespace dashboard. Click on SETTINGS, and scroll down to the ADVANCED section. Now choose, CODE INJECTION.

You should see the word HEADER and then a text box below. Now paste the following code, and hit save.

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

You should see something like this.

 
header-code-injection.png
 

Step 2: Add code to your Squarespace page header

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

 
accordion-dropdown.png
 

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>
 
custom-code-injection.png
 

Hit save.

Step 3: Add/Format your Squarespace accordion menu (FAQ dropdown)

Go to edit your page content and add a MARKDOWN block where you want your Squarespace accordion dropdown to go on your page.

 
markdown-squarespace.png
 

Next, a text box will appear- this is how you will format the Squarespace accordion menu/ FAQ dropdown. Copy and paste the following code into the block.

## **+ QUESTION 1**

REPLY 1

## **+ QUESTION 2**

REPLY 2

## **+ QUESTION 3**

REPLY 3

 
accordion-faq-squarespace.png
 

Replace the questions and answers with your own content. It's important to keep the # and the *, or you might run into some issues. You should end up with something like this.

 
dropdown-menu-faq.png
 
 

After you've entered all of your information, make sure to save and refresh the page. You should then be able to see it in action.

Optional for Squarespace Accordion: Steps to add a border around each question

Enter the following code into your custom CSS box. Head over to your menu and choose Design > Custom CSS:

  .sqs-block-markdown h2 {
  border: solid 1px #000;
  padding: 12px 14px;
}

To change the border colour simply enter your hex code here:

  .sqs-block-markdown h2 {
  border: solid 1px #000; <--enter hex code here (for example #e3e3e3)
  padding: 12px 14px;
}

To change the thickness of the border enter the pixel size here:

  .sqs-block-markdown h2 {
  border: solid 1px <-- enter pixel width here  #000; 
  padding: 12px 14px;
}


There you have it- hope you enjoy your new Squarespace accordion menu! If you are having issues with this code, make sure you have copied all of the Squarespace code properly. If you are still running into a problem, post a comment below and I will try my best to help you resolve it.