Creating a dropdown accordion style FAQ on Squarespace

Creating a dropdown accordion style FAQ on Squarespace by EG Media Co | squarespace, squarespace tips, dropdown accordion style FAQ, FAQ style

Depending on the services or products that you provide having a FAQ section on your Squarespace website might be beneficial to have. I love this as this can avoid from getting a ton of emails from different clients asking the same questions. You have the questions already on your website for your clients to easily access. When I was thinking about creating a FAQ section for my Squarespace website I automatically thought of having a dropdown type of style to show my questions. Creating a FAQ that is accordion style requires some easy coding for those of you that are not familiar with CSS. I will be providing an easy step by step process for you to be able to add a dropdown accordion style FAQ on your Squarespace website.

+ What is Markdown?

The Markdown Block lets you add text to your site using the Markdown language. The block supports lists, links, bolded and italicized text, and block quotes. More Info on Markdown.

+ Why should I have a FAQ?

There are many benefits of having a FAQ. One of them is that it alleviates client frustrations by having a frequently asked questions on your website. This can also improve your SEO and your site navigation. Your FAQ page can also act as the first point of contact for clients looking for answers before they reach out to you directly with their questions..

1. The first step is opening the page settings where you want to add the FAQ to. Click on ‘Advanced’ and this will allow you to add CSS to your page header. Paste this code into the page header:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script>
     $(document).ready(function(){
     $('.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() {$(this).nextUntil("h2").slideToggle();});
     });
     </script>

It should look like this:

Screen Shot 2018-04-28 at 2.16.16 PM.png

The code I provided is good for creating your FAQ in h2 if you wish to have it as h3 add this code to your page header:

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

Some blog posts have suggested to add this code as a code block but that didn’t work for me. I found that adding it to my page header worked best.

2. Once you have injected the code to your page header go to Edit your actual page content. Find the place where you would like the accordion style FAQ to be placed and click to add a new block. Click Markdown.

Add your questions to Markdown in this order:

+ This is the Question
this is the answer
+ This is the Question
this is the answer
+ This is the Question
this is the answer
+ This is the Question
this is the answer
+ This is the Question
this is the answer

It should look something like this:

Screen Shot 2018-06-07 at 5.44.31 PM.png

If you are having any trouble with how to add certain elements to your FAQ like links for example head over to the Syntax cheat sheet where you can syntax reference in the Markdown language.

There you have it! With this easy two-step process, you will be able to add an accordion style FAQ to your Squarespace website.  If you have any questions on how to add this to your page comment below!


Other Posts you might like: