Accordion-style FAQ design for Squarespace pages

Screenshot of accordion-style clickable FAQ page | Christina Keddie Photography | Squarespace web design tutorials

[Updated Oct. 2016, to make code work with iOS 10.]

Creating a "frequently asked questions" page on your website is a wonderful way to provide your potential clients with a fair amount of useful information, and hopefully to save you some time in responding to questions that are, in fact, frequently asked.  :)  As I wrote out the FAQs for my photography website, I realized that there was a lot of information that could be shared, and wanted to figure out a way to present it in a more user-friendly format than a giant wall of text.  Enter the accordion-style clickable FAQ!

The nice thing about the accordion styling is that your questions are initially listed without any of the answer text.  Viewers can then simply click on the questions that interest them in order to access the information they need.  It's cleaner, and looks very slick and professional -- and it's actually relatively easy to create!

This tutorial will walk you through designing an accordion-style FAQ page where you click the answers on and off -- answers will stay open until the user clicks them closed, and the user can open many of them at once.  You can vary the code to make each answer close when a new one is clicked open, or other similar variations -- contact me if you'd like help figuring out a variation!

 

THE BACKGROUND CODE SNIPPETS

First, we'll need to install Javascript onto your site.  Go to Settings > Website: Advanced > Code Injection, and then copy this into the Header field:

 
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Then go to your FAQ page and click the gear icon to access the Settings.  Click over to the Advanced tab, and then add this to the Page Header Code Injection section:

 
<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.addClass('flipButton');
answer.css('max-height', 'none');
answer.addClass('activeFaqAnswer');
}
else{
faqElement.removeClass('flipButton');
answer.css('max-height', '');
answer.removeClass('activeFaqAnswer');
}
});
});
</script>

And finally, we need to add styling for your FAQ accordion effect.  Go to the Design menu, then Custom CSS, and then add this to your Custom CSS box:

 
/* Styling for FAQ accordion dropdown */
.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;
    }
 

WRITING YOUR FAQ SECTIONS

Now that you've got the code all properly set up, it's time to create the FAQs themselves!  On your FAQ page, add a new Code block.  Here's the basis of the code for your FAQs:

 
    <div class="expandingFaq">
      <div class="faqElement">
        <h3 class="faqQuestion">
          Question 1 text?
        </h3>
        <p class="faqAnswer">
          Answer 1 text.
        </p>
      </div>
      <div class="faqElement">
        <h3 class="faqQuestion">
          Question 2 text?
        </h3>
        <p class="faqAnswer">
          Answer 2 text.
        </p>
      </div>
      <div class="faqElement">
        <h3 class="faqQuestion">
          Question 3 text?
        </h3>
        <p class="faqAnswer">
          Answer 3 text.
        </p>
      </div>
    </div>

Except, obviously, with your questions and answers in the spots where I've got "Question 1 text?" and "Answer 1 text."

This sample code uses your template's Heading 3 styling for the questions -- that's the "h3" part of the code in front of and behind each question line.  You can choose to use h1, h2, h3, or h4, depending on what look you prefer.  Try out the different heading styles while you're writing your questions, and you'll see the live preview window automatically update.  Whatever heading style you decide on, just make sure to replace all of the "h3" and "/h3" instances in this code with your chosen style.

If you want more than three FAQ pairs, you'll need to make sure to copy the entire question and answer code for each new pair, and add it into the code snippet above right before the final </div> line.  Here's the entire code chunk you would need for each new FAQ pair:

 
      <div class="faqElement">
        <h3 class="faqQuestion">
          Question 4 text?
        </h3>
        <p class="faqAnswer">
          Answer 4 text.
        </p>
      </div>

And that's it!  The code may look a bit intimidating, but it really is just a matter of copying and pasting it into the correct spots on your Squarespace backend.  But as always, feel free to reach out to me if you have any questions!

7 Comments