How to 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 using CSS.

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

Well, technically you don’t need one… but as a professional business owner, it's important to provide your potential clients with enough information to help them make an informed purchase 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!).

+ 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!

How to create a Squarespace Accordion

You will need to add a little code to your site in order to create a dropdown menu accordion in Squarespace. However, the process isn’t scary at all (promise) and these tips will have you up and running in no time! :)

Step 1: Add code to your Squarespace website

• First, you'll need to login to your Squarespace account and navigate to your site dashboard.

• Click on SETTINGS

• Scroll down to the ADVANCED section

• Select CODE INJECTION

• You should see the following at the top of your page > HEADER Enter code that will be injected into the 'head' tag on every page of your site.

You will see a text field below the Header section. Copy & paste the code below into the field and click save.

---

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

---

For reference, you should see something like this:

Step 2: Add code to your Squarespace page header

• First, head back to the PAGES section of your Squarespace dashboard/ navigation menu

• Decide what page you'd like to add the FAQ dropdown to

• Click the settings gear icon that appears next to the name of that page.

• Choose ADVANCED

Now you can copy and paste the code below 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>

---

Don’t forget to click 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.

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

You’ll of course need to change out the placeholder content with your own questions and answers.

It's important to keep the # and * syntax if you want the markdown block to function correctly!

Squarespace support has a Markdown Cheat sheet article that provides helpful information on syntax for markdown blocks (i.e. # Heading 1, ## Heading 2, etc) — be sure to check out the post if you’re confused on the language!

You should end up with something like this:

After you've entered all of your questions & answers/ accordion content, make sure to click save and refresh the page. Your Squarespace dropdown accordion should be ready to go!

Step 4 (Optional step for Squarespace Accordion): Add a border around each question

To add a border to your accordion dropdown menu, you’ll need to write some simple code into your custom CSS box.

• Head over to the navigation menu and choose Design > Custom CSS

• Copy & paste the following code in the text field:

// Add Border To Dropdown //

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

CSS Code Tip: I typically add my own “header” text above any CSS code in my site (i.e. // Add Border To Dropdown // ). This is completely optional! However, if you plan on adding CSS code in numerous places on your Squarespace site, you might want to create a title/header so you don’t get any of the code mixed up later on!

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

// Add Border To Dropdown //

  .sqs-block-markdown h2 {
  border: solid 1px #000; <- you can type any hex code here (for example #fff for white)
  padding: 16px 16px;
}

To change the thickness of your border, you can adjust your pixel size here:

// Add Border To Dropdown //

  .sqs-block-markdown h2 {
  border: solid 1px <- adjust your pixel size here  #000; 
  padding: 16px 16px;
}

---

There ya have it — hope you enjoy your new Squarespace dropdown accordion menu! If you’re running into issues with the accordion, make sure you’ve copied all of the Squarespace code properly and double checked that you have JavaScript enabled in your browser. If you are still running into a problem, post a comment below and I will try my best to help you resolve it. :)