Squarespace: Add FAQ Accordion

There are 3 ways to create FAQ Accordion in Squarsepace.

  • 2 ways for Business Plan
  • 1 way for Personal Plan (updating soon!)

Solution 1. Use Plugin (Business Plan or higher)

Download this plugin. It is easy to use and install. There are very detailed instructions when you open the download file.

Some screenshots.

Solution 2. Use Markdown Block (Business Plan or higher)

1. Add Code Block

See video

 

Edit the page where you want to create the Accordion > Scroll down to bottom > Insert Code Block

and paste this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 $(document).ready(function () {
    $('.markdown-block h4').click(function() {
      $(this).toggleClass('open').children('*:not(h4)').slideToggle(); 
    });
    }); 
</script>
<style>
body:not(.sqs-edit-mode) .markdown-block h4 {
    display: block !important;
     cursor: pointer;
}
  body:not(.sqs-edit-mode) .markdown-block h4 + blockquote {
    display: none;
}
    body:not(.sqs-edit-mode) h4.open + blockquote {
    display: block;
}
  body:not(.sqs-edit-mode) .markdown-block blockquote {
    margin-left: 0;
    margin-right: 0;
}
  .markdown-block h4 {
    background: #f1f2f3;
    padding: 10px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #e3e3;
}
  .markdown-block h4 + blockquote {
    background: #f1f2f3;
    margin-top: 0;
    padding: 20px;
}
</style>

 

2. Add Accordion content

Next, you use Markdown Block to add accordion content, use this format.

Notes: 

With accordion title, use h4 with syntax: ####

You need to wrap all the content of each accordion in the blockquote to make the code work properly.

See how to use blockquote syntax here: https://support.squarespace.com/hc/en-us/articles/206543587

Done!.

if you have any questions, just click in bottom below.

Solution 3. Use CSS (Personal Plan)

Updating soon…

Share this post:

Posted in