How to Add a Dropdown Accordion-Style FAQ to Your Squarespace Website

  1. Sshep says:

    Thanks for the post but I can’t seem to make it work in 7.1 :'(

  2. Paul Harris says:

    Just tried it and it is not collapsing. Thoughts?

  3. Jonathan says:

    Likewise, have been trying to get it to work, with no luck. Have there been more changes?

  4. Priyanka says:

    Hi Galen, thank you so much for this! I’m on 7.1 and have been on the hunt for accordion style FAQ code, and this was the only one that’s worked consistently.

    Whenever you have a sec, I have a few questions:

    • Is there a way to reduce the space between question and answer with custom css, or is this determined by template design settings? It looks like padding between them is actually already 0 with the custom css.

    • Is it possible to change the question font style from Heading 3, for example, (###) to Paragraph 1?

    • Is it possible to change ‘p’ to take after a certain Paragraph style (e.g. 1, 2 or 3)?

    • Galen Mooney says:

      I don’t know specifically about changing the paragraph style, but everything is customizable using css. You can also change the h3 in the code to any other heading style like h2 or h4. Hope that helps!

  5. Amy says:

    This works great, thank you! Easy to use. My only question is: how can it be coded to collapse an open item upon clicking a different item (i.e. only one question open at a time)? I’ve tried to use the slideUp and Down vs. just using Toggle – which worked for 7.0 beautifully, but does not work for 7.1
    Any thoughts? Thanks in advance!

    • Galen Mooney says:

      I tried this on 7.1, but it’s a little glitchy. I didn’t love the experience of it because the page jumps up and down as the other items collapse. I’ll look for an alternative. Thanks for commenting!

  6. Katie says:

    Thanks for the clear information! Do you know how to modify the position of the open/close icon so that is right-aligned like the example here:

    https://tawonga.org/summer-programs/new-families/2021-program-faq/

  7. Ridhima says:

    Hey, thanks! This is awesome.

    However, I have one question:
    Whenever I had a link to one of my answers (using this Syntax cheatsheet: https://support.squarespace.com/hc/en-us/articles/206543587?_ga=2.202369553.1042156555.1615122988-1124700313.1552253565), the code questions don’t stay collapsable!? I’m confused why this is happening or how to fix it.

  8. Lindey says:

    Thank you! So helpful! I am struggling to find the answer to one other question… Can you let us know how to edit the font size of the answers, not just the font size of the questions?

  9. LuAnn says:

    Thank you. I tried several tutorials to get this to work and yours did the trick. I changed the Color: purple in the CSS code at the bottom to one of my brand colors with a hex code. It worked! Brilliant! Thank you.

  10. Jane says:

    This worked great for me, thank you! I’m using the dropdown for Bio info. Is it possible to add a small picture (headshot) to the drop down text?

  11. Jane says:

    My client like the bio section in the website I’ve attached. On the about us page, two of the team members have headshots in the drop downs. Is this possible to do in Squarespace?

  12. ca says:

    Hello! Thank you for the great tutorial 🙂
    One question…I got it to work but I do not se the "+" sign or "-" when expanding or collapsing a Question. Is this additional code? or does it have to to with the overall site design? Thanks!

  13. Heather says:

    This is very helpful! I got the code to work, but when I tried to add section headings to break the FAQs into categories it stopped working properly. Do you know a work-around? Thank you!

  14. Dehan Engelbrecht says:

    So amazing! Thanks for the share 🙂

  15. Jeanine Wilson says:

    Thanks for the amazing post, but I’m having trouble getting the + and – to appear in 7.1. Also when opening and collapsing an answer, the page jumps around a bit. Have you found a work around for this at all?

  16. Nikki says:

    Super appreciate this post! 7.1 was giving me a headache.

  17. richard says:

    is there a way to make this work on mobile?

  18. Graham says:

    I have used your code for a “FAQ” on my squarespace site (usindoorlacrosse.com) I can’t get it to work properly on mobile devices ie: Ipad – Any suggestions????

    -Graham

  19. Sheldon Gay says:

    How do I center-align the FAQs?

    I tried adding “justify-content: center !important” but that didn’t work

  20. Daniel says:

    This is very helpful!!! What if I wanted to hide categories to provide a cleaner look on my FAQs page ?

Leave a Reply

Your email address will not be published. Required fields are marked *