This site has limited support for your browser. We recommend switching to Edge, Chrome, Safari, or Firefox.

Our biggest ever template sale - All Squarespace Templates just £49

How to Install the FAQ Dropdown Accordion in Squarespace 7.1 (With No Code)

Squarespace has been hot on releasing some great new features lately, one of which is a new block called the 'accordion block' which you can add to your site, allowing you to create a FAQ accordion in Squarespace 7.1, without needing to use any code at all.

Gone are the days of having to install Javascript and use markdown code blocks to create this functional and stylish feature on your site. An accordion is also known as an expandable section of a web page, that’s hidden by default and opens up when you click or tap a plus or arrow button.

Dropdown accordions are great for organising FAQs or lots of information into easy, bite-sizeable chunks. So let's go ahead and show you how to use them!

How to use the new accordion block in Squarespace 7.1

1) Add the accordion block

Go to the page that you want to add the accordion block to, hover over the section until the blue line appears and click the plus button. This then brings up all the Squarespace blocks feature.

Scroll down to see the 'accordion' block, or use the search feature to search for 'accordion'.

Squarespace Accordion Tutorial | Website Design Advice


2) Add your content to the accordion block

Under the content tab, you can add your text. You want to put the question or heading into the 'title' field, and the answer that will be revealed when you click on the title, into the description field.

Squarespace Accordion Tutorial | Website Design Advice


You can re-order your content by clicking on the 6 dots to the left of the item under the content tab, and dragging and dropping them.

Squarespace Accordion Tutorial | Website Design Advice


3) Customise the design of the accordion block

Under the 'design tab' you have the option to change the font sizes, add or remove divider lines between your content, change the icon placement, size and thickness as well as the spacing between each of the rows.


How to add a custom icon to your accordion block

Whilst you don't need to use code to get your accordion block set up and working, if you wanted to customise the block further by adding your own custom branded icon, then you can use a little code snippet to achieve this.

1) Set up your accordion block

Use the above instructions to get your content into the accordion block. Please note, for this code to work, you need to have the icon set to the 'plus' option.

Squarespace Accordion Tutorial | Website Design Advice


2) Upload your custom bullet point

Export your custom bullet point as a .png file, and then go to Design > Custom CSS and scroll down to the bottom and click on 'Manage custom files', and then 'add images or fonts'.

Squarespace Accordion Tutorial | Website Design Advice


3) Add in your code for custom icons in accordion blocks

First, we need to hide the existing 'plus icon' to do this we add in the following code:


CODE

Then we need to tell Squarespace to use our own custom png icon instead by adding in the following code:

CODE

Squarespace Accordion Tutorial | Website Design Advice


To get your image URL, place your cursor in between the brackets, click 'manage custom files' and then select your icon, and this will automatically pull in your image URL.

You can adjust the height and width of the icon by editing the width and height properties in the CSS.

Your final CSS should look something like this (but with your custom icon image url instead of mine!)

CODE

Squarespace Accordion Tutorial | Website Design Advice

Et voila! And there you have, how to use and customise the accordion block in Squarespace 7.1

Squarespace Accordion Blocks and User Experience

A final word on Squarespace accordions - just be careful not to overuse them. Whilst they are commonplace on most websites these days, from a UX (user experience) standpoint, they can be harmful to your UX if you use them to squirrel all of your good content away behind another click.

Make sure that all of your important information or main call to actions aren't hidden by an accordion. When creating a good user experience for your website design, you want to reduce the number of clicks to get the user to where you want them to go.

In short - don't use an accordion to hide something really important that your users would want to know or see.

FOUND THIS POST HELPFUL? SHARE ON PINTEREST


Disclaimer - This post contains affiliate links to Squarespace. That means if you buy through my link, we may receive compensation at no extra cost to you.

subscribe

Join Our Mailing List For Freebies!

Sign up to our newsletter to receive our much-loved monthly design digest newsletter, free design resources (sent every month!) and exclusive email-only offers.

Browse The Store

Looking for inspiration to kick start your next project?

Cart

No more products available for purchase