Accordion Block: Dos and Don’ts

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! 

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

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

Been waiting for this feature for years

On 11/10/2021 at 9:02 PM, bangank36 said:

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

Yes! Adding images would be fantastic.

I'm very pleased with this option though, since using coding and markdowns was often buggy and the accordion rarely loaded "closed"

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. 

You could try making sure you specify the exact weight (300,500,600 etc) of the custom font. That worked for me on mobile when I had a similar issue. 

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.  

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

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

On 3/17/2022 at 2:35 PM, vickys said:

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

Hi, Vicky.

It looks like you have this code in the header of the page that's giving you issues:

<script>
     $(document).ready(function(){
     $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
     $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
     $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});
     });
</script>

You have this code in the header of the pages that are working as you'd like:

<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();});
     });
</script> 

So, on the page that's giving you issues, it's not targeting the h2s in your Markdown blocks but rather the h3s. The h3 markdowns are working on this page. If you want the h2s to work as well, putting both scripts in your page header should help.

Greetings!!  I also love the Accordian Block.  I have full page video playing on my home page and the Accordian Block allows me to have three items displayed as:

I am a ____
I am a ____
I am a ____

Looks great!!

But when the user clicks on one the text link that then displays in my template color (green) is difficult to read over the video playing in the background.  I would really like to be able to specify the opacity for the dropdown link text.

Is that possible?

Thanks very much!!

PEM😀

Can anchors be added to the top of an accordion block to enable users to switch between sections in a FAQ? I want to break down the content into smaller sections and allow users to navigate using the anchors. This is the page: https://www.valleydental.au/veneers 🙂