Jo_SQSP Posted November 10, 2021 Share Posted November 10, 2021 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! Amaya_SQSP, Tiny_Coast and Beyondspace 3 Link to comment
Beyondspace Posted November 11, 2021 Share Posted November 11, 2021 I wish the accordion block can add image like people auto-layout instead of just text Filledor, amritanan, TheBowerStudio and 7 others 10 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
christyprice Posted November 11, 2021 Share Posted November 11, 2021 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 BellamyTree, Spark_Plugin, ghostplugins and 2 others 3 2 christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist for $17. 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
DavidCliff Posted November 17, 2021 Share Posted November 17, 2021 Been waiting for this feature for years Tiny_Coast 1 Link to comment
TheBowerStudio Posted December 18, 2021 Share Posted December 18, 2021 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" Tiny_Coast 1 Link to comment
rebeccahoagland Posted March 1, 2022 Share Posted March 1, 2022 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. Link to comment
Brent_Dickens Posted March 4, 2022 Share Posted March 4, 2022 (edited) 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. Edited March 4, 2022 by Brent_Dickens Added some more detail. Link to comment
Tiny_Coast Posted March 6, 2022 Share Posted March 6, 2022 (edited) 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. Edited March 6, 2022 by Tiny_Coast Brent_Dickens 1 🌊 Tiny Coast Digital | Digital Marketing & Web Design 🌊 Link to comment
vickys Posted March 17, 2022 Share Posted March 17, 2022 (edited) 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 March 17, 2022 by vickys additional detail Link to comment
dnmddy Posted April 13, 2022 Share Posted April 13, 2022 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 christyprice 1 Link to comment
AndyB Posted October 16, 2022 Share Posted October 16, 2022 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. Looking for help with a project? 💻 www.connectionmadedesign.com ✅ for hire on Upwork (Top Rated Plus) Link to comment
PEM2022 Posted December 2, 2022 Share Posted December 2, 2022 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😀 Link to comment
Katey001 Posted March 30 Share Posted March 30 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 🙂 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment