Creating collapsible FAQ in Squarespace

While looking at an FAQ page, a user rarely wants to read every single question and answer list. One strategy companies often use 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 implement this feature smoothly.

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

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:

JS
 <script src="https://code.jquery.com/jquery-2.1.3.min.js"></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:

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

CSS
.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!):

Jquery<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 styling to the questions. As always, we’d love to hear from you in the comments with anything that is on your mind.