Here’s the situation; you have a TON of information to communicate to your website visitor, but you want to do so in a way that isn’t overwhelming to them. Not to mention the fact that a wall of text simply wouldn’t mesh with your beautiful Squarespace website design!

The answer to your woes? A collapsible content accordion view!

What is an accordion view?

An accordion allows your website visitor to selectively hide and display information on your website. By using clickable toggle buttons, you can display a large amount of content on one page without overwhelming your reader or clogging up your web design with a wall of text.

That’s all great, but how can you add this feature to your Squarespace site if it’s not an available content block? Keep scrolling to see how to achieve this look for your website!

Psst! We’re a Squarespace Circle member and affiliate, and genuinely think it’s the best web platform out there. Click here and use coupon code STATION10 for 10% off your first year.

How to Add an Accordion to Squarespace

UPDATE! Accordion functionality has now been added to Squarespace 7.0 and 7.1 with the Accordion Block. You can now add an accordion to your Squarespace site using their famous drag and drop builder. Read more about this new feature here.

Find our original workaround below…

With some simple code, you can get this look on your Squarespace 7.0 or Squarespace 7.1 site—it works for both!

Step 1. On the page you want to add your accordion, go to the page settings > Advanced and paste this into the “Page Header Code Injection” section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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();});
});
$(document).ready(function(){
$('.markdown-block .sqs-block-content h2').click(function()
{$(this).toggleClass('plus-minus');});
});
</script>

Step 2. Now begin editing the page and add a Markdown block. You can then enter your content in this format:

## Title content here
Accordion content here

## Title content here
Accordion content here

## Title content here
Accordion content here

## Title content here
Accordion content here

Step 3. Be sure to save your changes and refresh your page, the accordion should now be working!

Congrats! You should now have an accordion view displayed on your page!

Here’s a quick video of the entire process in action:

Why would you use an accordion on your Squarespace site?

As we mentioned previously, collapsible accordions are a great way to display a lot of information on your web page without overwhelming your visitor with too much content at once. Because of this, accordions are super handy in situations where you might have a lot of information, such as:

Product FAQ

We love using accordions to display answers to frequently asked questions throughout our website, including directly on our Squarespace template product pages like this one. We use them to answer any potential questions a customer might have while they decide if the product is the right fit for them or not.

Contact Page

We also use them on our Contact page. This is a great way to get one step ahead of your visitor by answering their questions on the spot, without the need for them to submit a request and wait for a response. This is a total win-win; the info they need now, and one less email getting in between you and inbox-zero!

Terms and Policies

Terms and policy pages can definitely be overwhelming with a large amount of text content. Consider breaking them down into sections and displaying them in an accordion view.

Long Form Sales Pages

Just like our product pages, we use accordions on long form sales pages like the one used for our signature course, Crafted to Convert. There’s a lot of info to cover there (because it’s a deep course!), and an accordion helps break up all that sweet value into bite-sized chunks.

That’s all there is to it, it’s not too difficult to add an accordion to your Squarespace site by following the above tutorial. Have you added one to your site, and if so, what content do you use it to display? Let us know in the comments below!