How to make an accordion-style FAQ in Squarespace

We all love Squarespace for its clean design, white space, and intuitive user interface. But unlike other platforms, there aren't a whole lot of plugins readily available, hence having to use some workarounds to get things looking just the way you want them to. I'm still very much a newcomer to Squarespace, having only been actively building sites for clients for about a year now (yay!) so it's only recently that I've started to play around with some custom coding. It's a whole new world, and a very exciting one at that. 

I recently discovered the accordion drop-down trick while browsing through a Squarespace forum and thought I'd share it with you here in case you ever want to incorporate it into your own site. 

Pinterest blog graphics II-10.png

What exactly are you talking about?

Here's how I've done some FAQ pages in the past. I've used a combination of space blocks, text blocks, lines and different fonts (heading 3 and normal) to create this layout. It's kind of fiddly but ends up looking quite neat and tidy. The only problem is if you have a long list of frequently asked questions, this approach can take up loads of space. What you really want with an FAQ page/section is for people to be able to scan a list and then quickly pick out the question that applies to them. This first approach (below) helps to a degree, but I think there's a better way to do it.  What do you think?


Question 1

This is the answer to question number 1. And so it goes and here is the blurb that follows. 

 

 

Question 2

This is the answer to question number 2. And so it goes and here is the blurb that follows. 

 

 

Question 3

This is the answer to question number 3. And so it goes and here is the blurb that follows. 

 

 

Creating drop-down questions using Markdown and CSS

As I said, I'm a newbie to all this so I'm here are some definitions of CSS and Markdown that we can both learn from together. CSS stands for Cascading Style Sheets and describes how HTML elements are to be displayed. 

Markdown is a lightweight text format that allows you to create documents, rich text, or HTML markup using any plain text editor. It’s easy to read, and easy to convert into formats like PDF, Word, or HTML.
— Ray Villalobos, Lynda.com 

Okay, so let's make that FAQ page!


1 | Paste the following CSS into your 'Code Injection'

Go to Settings, Advanced and then select 'Code Injection'. Paste this code into the Header Window.

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

 

2 | Add some custom code to your page header

Now go to the page you want to work on, select the 'gear' icon at the top of the page to go into the page settings. Select 'Advanced' on the top right corner and copy and paste the following code into the window that says "Page Header Code Injection." Here's the code: 

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

 Screenshot of page settings (Advanced) where you should add the code above.

Screenshot of page settings (Advanced) where you should add the code above.

 

3. Open a Markdown Block and add your text

First, insert a content block and select the 'Markdown' option.

Insert Markdown Content Block

Then start to type in your questions and answers in the Markdown block that pops up. 

  • The Hashtag indicates the heading style
  • One hashtag (#) indicates Heading 1
  • Two hashtags (##) indicate Heading 2 and so on.
  • I've added the 'plus' sign here because it indicates that there is more content hidden away out of sight.
Write questions in the Markdown box

Here's an actual version of this, right here on this blog post. 

+ This is my question

This is my answer

+ This is my next question

This is my next answer

+ This is my third and final question

This is my third answer


How great is that?

Now if you want to change the header font choice, and say go with a heading 3 or 4 instead of a larger heading, then go and adjust your original Header Injection code to read 'h3' instead of 'h2'. Make sure you don't miss any bits! And then when you add your markdown, instead of typing '##' type in '###' and the size of your heading fonts will change. 

Here's another example from a site I've been working on.

create-accordion-faq

For more on this topic, check out the questions and answers section on Squarespace Support, and have a look at the Markdown Cheatsheet  


If you found this helpful, you might like to have a look at these other Squarespace-related blog posts.