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'.
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.
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.
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.
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'.
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
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
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.
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.
