Create Accordion Blocks in Squarespace
TL;DR:
- Accordion blocks let you create collapsible sections for FAQs or product information
- They reduce page length and make content easier to scan
- Only one section can be open at a time to keep things tidy
- Squarespace 7.1 has more styling options than 7.0
Accordion blocks work well when you have lots of text that might overwhelm visitors. They're perfect for FAQ pages, product details, or any content where people need to find specific information quickly.
Adding Your First Accordion Block
Edit your page and click 'Add Block', then select Accordion from the menu. Once it's added, click the pencil icon to open the editor.
You'll see two tabs:
- Content Tab: Add your accordion items here. Each item needs a title (always visible) and description (shows when expanded)
- Design Tab: Control how everything looks
Start with your content first. Add a clear title for each section and write your description text. Keep titles short and descriptive so people know what they'll find inside.
Styling Your Accordion
Basic Appearance
In the Design tab, you can adjust text alignment, width, and spacing. The 'Expand first item by default' option is worth turning on since it shows visitors how the accordion works.
You can choose between arrow or plus icons for expanding sections. Pick what feels natural for your site's style.
Advanced Options (Squarespace 7.1 Only)
Version 7.1 gives you more control over styling:
- Background colours for the entire accordion block
- Corner radius to soften sharp edges
- Stroke outlines with custom colours and thickness
- Blend modes for overlay effects
These features aren't available on Squarespace 7.0, so check your version before planning your design.
Dividers and Spacing
You can add dividers between accordion items or turn them off completely. Adjust padding around text and set how much space the accordion takes up on your page.
The width settings let you control whether the accordion stretches across the full page or sits in a narrower column.
Best Practices
Keep your accordion titles scannable. People should understand what each section contains without having to open it first.
Write descriptions that get straight to the point. If someone's looking for specific information, they don't want to wade through extra text.
Consider your page flow. Accordions work best when they're not the only content on a page. Mix them with other elements to create visual interest.
FAQs
Can multiple accordion sections be open at once?
No, Squarespace accordions only allow one section open at a time. This keeps the page tidy and helps visitors focus on one topic.
Why can't I see background colour options?
Background colours are only available on Squarespace 7.1. If you're on version 7.0, you won't see these styling options.
How do I know which version of Squarespace I'm using?
Check your site settings or look at your page editor. Version 7.1 uses the Fluid Engine editor with drag-and-drop sections.
Can I nest accordions inside other blocks?
No, accordions are standalone blocks. You can't put them inside other content blocks, but you can place them between other blocks on your page.
Jargon Buster
Expand Icons: The arrows or plus signs that show whether an accordion section can be opened or closed
Fluid Engine: Squarespace 7.1's page editor that allows flexible layouts and advanced styling
Blend Modes: Settings that control how accordion backgrounds interact with content behind them
Stroke: A border or outline around your accordion block
Wrap-up
Accordion blocks help you present lots of information without overwhelming your visitors. They're particularly useful for FAQs, product specifications, or any content where people need to find specific details quickly.
The key is keeping your titles clear and your content focused. People should be able to scan the closed accordion and know exactly what they'll find in each section.
Start with the basics and add styling once you've got your content working well. Remember that not all features are available on older Squarespace versions, so check what you're working with before planning complex designs.
Join Pixelhaze Academy to access more Squarespace tutorials and get help with your website projects.