Squarespace: Creating an Accordion Style FAQ Section

Are you looking to have an FAQ page on your website but are finding that the page looks text-heavy from all the questions are answers? Maybe you think it would look better with a collapsible version of the questions and answers instead. Here’s how you can easily achieve that look with a tiny bit of CSS and some jQuery.

Step 1: The code for questions and answers

First, we’re going to go to our FAQ page and insert a MARKDOWN block. Inside we’re going to put the following.

## Question 1
The answer for question 1

## Question 2
The answer for question 2

Feel free to replicate that as needed for more questions.

Step 2: Adding The Functionality

Now we’re going to enter the jQuery code to make this work as needed. Go to SETTINGS > ADVANCED > CODE INJECTION and add the following code.

*If you’re using markdown blocks elsewhere on the website as well and the code affects it, you can instead add this code to the FAQ page’s header code only by clicking the gear icon to the right of the FAQ page name and then click ADVANCED, there’s a field for CODE INJECTION that you can enter the code into instead*

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h2').addClass('ui-closed').css('cursor','pointer');
$(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
$(".markdown-block .sqs-block-content h2").click(function() {

$(this).nextUntil("h2").slideToggle();
$(this).toggleClass('ui-closed ui-open');
});
});
</script>

Step 3: Adding a + and – symbol to the left of questions as they expand and close.

Go to DESIGN > ADVANCED > CUSTOM CSS and enter the following.

.markdown-block p {
margin-left:1.5em;
}
.markdown-block .ui-closed:before {
font-family:monospace;
content:"+ ";
}

.markdown-block .ui-open:before {
font-family:monospace;
content:"- ";
}

BONUS

Do you find the questions to be too large because they are H2 tags? If so, you can use the H3 tag instead by add an extra # to the front of the code in STEP 1 so it looks like “### Question 1” instead.

Once you do that, go to the code in STEP 2 and change all the h2 to h3 in the code. There are five instances of h2 which need to be changed to h3.

SPECIAL THANKS

A special thanks go out to Silva Bokis for his code which was used to create this tutorial. His original post can be seen here.

VIDEO INSTRUCTIONS
MORE VIDEO TUTORIALS

Want more help? We have tons of YouTube tutorials on customizing your Squarespace website. Subscribe to our channel so you will know when a new tutorial is out.

Vigasan Gunasegaran About the author
vigasan@live.com

I've been working on Squarespace and WordPress websites for quite some time now. I enjoy how easy it is for clients to make updates to their own websites while using a CMS system. Outside of website design, I love good food, Netflix, and video games.

No Comments

Leave a Reply