Creating collapsible FAQ in Squarespace 7

While looking at an FAQ page, it is rare that a user wants to read every single question and answer listed.  One strategy companies often use is creating an FAQ page with collapsible questions.  On this page, when a user clicks on a question, the answer expands underneath, allowing the user to focus on only that answer.  By default, you can't create this feature in Squarespace and it is difficult to smoothly implement this feature.

Until now!

This tutorial will teach you how to implement expanding FAQ on your own site.  Below is a sample of how it would look on part our own Jeopardy Rocks FAQ:

How many teams can play in a game?

A maximum of four teams can play in a game.

How do I share my game?

With a custom url (e.x., you can share your URL with anyone in the world. Don't worry, they won't be able to edit without signing in! People can also play the game on different computers at the same time.

Are there pre-existing games I can use?

Not yet! However, we are looking into creating a library of high quality games available to everyone. If you have a game you created that you think is awesome, please send the link to

How does scoring work?

When a team gets an answer incorrect, simply press the જ under the corresponding mascot. The points will be deducted, and the other teams will have the chance to answer. When a team gets a question correct, simply press the ચ under the corresponding team mascot. The game will automatically award the points and then display the correct answer. The game will not proceed unless all the teams get the answer wrong, or one team gets the answer correct.

The first step, as with many of our other guides, is to add jQuery to your site.  To accomplish this, the first thing you want to do is head to Settings → Advanced → Code Injection. Once on the Code Injection menu, paste the following code into the textbox titled Header:

    <script src=""></script>

Next, you will want to create a code block.  This is where you will put your actual questions and answers.  Inside the code block, insert the following:

<div class="expandingFaq"> <div class="faqElement"> <h2 class="faqQuestion"> Enter Question Here </h2> <p class="faqAnswer"> Enter Answer Here </p> </div> <div class="faqElement"> <h2 class="faqQuestion"> Enter Question Here </h2> <p class="faqAnswer"> Enter Answer Here </p> </div> <div class="faqElement"> <h2 class="faqQuestion"> Enter Question Here </h2> <p class="faqAnswer"> Enter Answer Here </p> </div> <div class="faqElement"> <h2 class="faqQuestion"> Enter Question Here </h2> <p class="faqAnswer"> Enter Answer Here </p> </div> </div>

Edit the text between <div> tags that have class="faqQuestion" to edit questions and <div> tags that have class="faqAnswer" to edit answers.  To add more questions, just copy and paste the entire <div> tag with class="faqElement".

Now that you have your questions and answers ready, it is now time to add styling.  To do so, simply head to Design → Custom CSS and paste in the following code:

.faqElement { padding: 2em 0; border-bottom: 1px solid #EDEEEE; position: relative; } .faqElement:after { font-family: 'squarespace-ui-font'; -webkit-font-smoothing: antialiased; content: "\e02d"; position: absolute; top: 2em; right: 1em; font-size: 1em; font-weight: bold; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); cursor: pointer; } .flipButton:after { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .faqQuestion { cursor: pointer; margin: 0; padding-right: 2em; } .faqAnswer { margin: 0; max-height: 0; overflow-y: hidden; -webkit-transition: all .25s; -moz-transition: all .25s; transition: all .25s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; padding-right: 2em; } .activeFaqAnswer { margin-top: 1.5em; }

The FAQ should start to look just right now.  The only problem is that now when you click on a question, nothing moves.  The final step to make this happen is to add functionality to your FAQ.  In the Squarespace menu, click on the Settings wrench that you are on, and paste the following into Page Header Code Injection under the Advanced tab (Important: if you are in an index, make sure you add code to the entire index itself, and not to the individual page!):

<script type="text/javascript"> $(document).ready(function() { $('.faqElement').click(function() { var faqElement = $(this); var question = faqElement.find('.faqQuestion'); var answer = faqElement.find('.faqAnswer'); if (!answer.hasClass('activeFaqAnswer')) { $('.faqElement').removeClass('flipButton'); faqElement.addClass('flipButton'); $('.activeFaqAnswer').css('max-height', ''); $('.faqAnswer').removeClass('activeFaqAnswer'); answer.css('max-height', 'none'); answer.css('max-height', answer.height()); answer.addClass('activeFaqAnswer'); } }); }); </script>

And there you have it!  Your expanding FAQ is complete!  Feel free to play with the CSS to add your own colors or stylings to the questions.  As always, we'd love to hear from you in the comments with anything that is on your mind.