Creating an Accordion Style FAQ Section on Squarespace

Table of Contents

Do you have an FAQ page on your website but think it looks too text heavy? Here's how you can transform the page into an accordion-style FAQ.

---

Demo

Question 1

The answer for question 1

Question 2

The answer for question 2

---

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 → 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 - Having Only 1 Question Expanded at a Time

If you want the user to be able to only expand one question at a time and have the previous question retract, use the following code INSTEAD of the code in step 2.

<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').css('cursor','pointer');
  $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
  $(".markdown-block .sqs-block-content h2").click(function() {
    $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideUp();
    $(".markdown-block .sqs-block-content h2").removeClass('ui-open');
    $(".markdown-block .sqs-block-content h2").addClass('ui-closed');
    $(this).nextUntil("h2").slideDown();
    $(this).toggleClass('ui-closed ui-open');
  });
});
</script>

BONUS - Using H3 Instead of H2

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