Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Accordion Block: Dos and Don’ts


Recommended Posts

Accordion or collapsible menus are considered one of the workhorses of web design for good reason. They’re a versatile tool for text heavy pages on a website, like those showcasing a list of Frequently Asked Questions (FAQ), and they also help keep your pages short and reduce scrolling fatigue for your readers. They can solve potential design problems, like too much content or too little real estate on the page, and they can provide an intuitive direction for users to explore the information that they need and collapse the information that they don’t. 

In Squarespace, if you’d like to add an accordion menu to your site you would need to use an Accordion Block. Accordion Blocks have their own styling options that you can customize to get the look and feel you want for your site. If the available customizations don't cover your needs, our community member Tuanphan created a handy list of useful code for the Accordion Block.

Are you planning on using the Accordion Block? Do you already use one on your site? What are your best practices for the effective use of an accordion menu? Share your thoughts with us in the comments below! 

 

Link to comment

I wish the accordion block can add image like people auto-layout instead of just text

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

LOVE the new accordion block. @ghostpluginshas some great free Custom CSS for it too.

I did a quick video walkthrough of styling options here (there are some that are kinda hidden, like the description width): https://christyprice.com/blog/how-to-add-accordion-squarespace

Link to comment
  • 1 month later...
  • 2 months later...

I have custom fonts installed on the site I'm working on, and for some reason the titles aren't showing up at all on the accordion. Does anyone have any ideas? I've played around with font size and spacing and I can't get anything to show up. Ive also tried changing it to the paragraph text since that's not custom and still nothing! any thoughts would be helpful.

Thank you. 

Screen Shot 2022-03-01 at 3.34.30 PM.png

Screen Shot 2022-03-01 at 3.34.21 PM.png

Link to comment

I'm really happy about the accordion release! They are a great tool for cleaning up a page that is text-heavy and providing a better mobile experience. 

I think a "do" when using accordions is to make sure the heading for each tab is descriptive enough or labelled in a way that it will be intuitive for someone to click in and read more. 

I'm using the accordion in two ways and in two places on my website. One is to provide more information on what would otherwise be a text-heavy page, and the other is an FAQ section.  

 

 

accordion-example.png

Edited by Tiny_Coast
Link to comment
  • 2 weeks later...

Can anyone suggest why my accordion points have stopped working on this page ie. they are all expanded: 
https://www.earth-changers.com/sustainable-places/pangaea-exploration

I've changed nothing and they used to work.
And they work on all the other pages where I feature them, eg.
https://www.earth-changers.com/about/frequently-asked-questions
or https://www.earth-changers.com/sustainable-places/nepal-tiger-mountain-pokhara-lodge

I've fiddled around trying to add a new MarkUp block of content, but still they won't work on this page. I've also removed and re-saved the header code to no avail.

Any ideas? (please note I'm no developer!). Thanks!
Vicky

Edited by vickys
additional detail
Link to comment
  • 4 weeks later...

it's so frustrating that you cant paste in text with basic styling like bold or hyperlinked. The block allows for this to be applied, so why can't we paste in the text with it? It's extremely time consuming to have to reformat everything

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...