How to do accordion/toggle for FAQs, etc.?

I discovered that Squarespace doesn't have any accordion/toggle styling that can be used for FAQs, etc. I was directed to come here and ask how to do it. I was hoping to have something that looks like this (see attached image).

Looks like a job for Markdown blocks. Check out this article from Silva Bokis:

http://www.silvabokis.com/squarespace-tips/how-to-create-hideshow-faqs-in-squarespace

Take a look at altank's answer in this thread:https://answers.squarespace.com/questions/9451/how-can-i-add-jquery-to-my-site.html

If you want to style the accordion to look like the image, you will need to use CSS.

Thanks so much for this info. I finally had a chance to figure this out and got it working. Very much appreciated!

My next challenge is trying to figure out how to do the custom CSS in Squarespace to make it look like my example image. If you or anyone can give me a bit of direction, that would be awesome.

Thanks in advance!

Update: So I got the accordion script to work finally. Thanks again, ConradS, for that link!

Next question: Is there anyone willing to give me the CSS so that the toggles display like the example image in my original post?

Here is the current CSS on my page:

.markdown-block p {margin-left:1.5em;}.markdown-block .ui-closed:before { font-family:monospace; content:"+ ";}

.markdown-block .ui-open:before { font-family:monospace; content:"- ";}

Hello,

Hope you are all well but i need to tell you with help from these guys they are fantastic in this work please check out the video.

and comment there so they help you with this issues.

This accordion has the animation your looking for, and it can house any Squarespace blocks.Works with all templates :)

---> Content Accordion

Any updates on this? Can't get it to work now.

Any updates on this? Can't get it to work now. @SquareStudio @dizzyd @conrads

This is fab - do you know if there is a way of styling it?

Hi @dizzyd , I made a video tutorial for you on how to Accordion/Toggle for FAQs. Hope this helps! https://www.askquesty.com/post/how-to-add-an-accordian-shopify-tutorial

Hi @SquareStudio - your accordion looks great - can I ask if it works with the Basic plan of Squarespace? Can I inject the code in markdown? Thanks!

10 hours ago, lisanemetz said:

Hi @SquareStudio - your accordion looks great - can I ask if it works with the Basic plan of Squarespace? Can I inject the code in markdown? Thanks!

Personal Plan doesn't support script code. You can also follow this guide to add accordion in Personal Plan.

On 4/6/2021 at 12:32 AM, tuanphan said:

Personal Plan doesn't support script code. You can also follow this guide to add accordion in Personal Plan.

Thank you so much, that is mega helpful! Can I ask you, is there a way of making the transition when the accordion opens up smoother in any way, so that the box slides open rather than just jumps? (Using the CSS method) Thanks so much! ☺️

On 4/8/2021 at 5:23 PM, lisanemetz said:

Thank you so much, that is mega helpful! Can I ask you, is there a way of making the transition when the accordion opens up smoother in any way, so that the box slides open rather than just jumps? (Using the CSS method) Thanks so much! ☺️

Can you share link to a page where you added the code? I will try tweaking the code

On 6/5/2019 at 12:49 PM, AskQuesty said:

Hi @dizzyd , I made a video tutorial for you on how to Accordion/Toggle for FAQs. Hope this helps! https://www.askquesty.com/post/how-to-add-an-accordian-shopify-tutorial

On 6/5/2019 at 12:49 PM, AskQuesty said:

Hi @dizzyd , I made a video tutorial for you on how to Accordion/Toggle for FAQs. Hope this helps! https://www.askquesty.com/post/how-to-add-an-accordian-shopify-tutorial

On 4/5/2021 at 6:32 PM, tuanphan said:

Personal Plan doesn't support script code. You can also follow this guide to add accordion in Personal Plan.

Hi! I added this to my page and double checked but it's not working. Can you tell me what I've done wrong?

On 4/5/2021 at 6:32 PM, tuanphan said:

Personal Plan doesn't support script code. You can also follow this guide to add accordion in Personal Plan.

Just now, meredithdesignco said:

Hi! I added this to my page and double checked but it's not working. Can you tell me what I've done wrong? https://jaguar-rhubarb-yndx.squarespace.com/volunteer

Just now, meredithdesignco said:

 

On 7/9/2021 at 3:35 AM, meredithdesignco said:

 

 

 

Your site is private. Can you setup password & share url again?

On 5/3/2018 at 10:09 PM, SquareStudio said:

This accordion has the animation your looking for, and it can house any Squarespace blocks.Works with all templates 🙂

---> Content Accordion

/storage/temp/9608-ezgif-3-2b13bd6cea.gif

I'm having difficulty buying and contacting @SquareStudio about buying this plugin. Have tried submitting support ticket through the website, engaging them through their support chat web messenger service, joining the FB group which has not been accepted for over a day now, and also emailing to an email i received from a previous order.

On 8/12/2021 at 4:02 AM, Insider said:

I'm having difficulty buying and contacting @SquareStudio about buying this plugin. Have tried submitting support ticket through the website, engaging them through their support chat web messenger service, joining the FB group which has not been accepted for over a day now, and also emailing to an email i received from a previous order.

Pretty sure this is common and they're not really doing plugins anymore.

I strongly suggest using the SQSPThemes accotabs plugin instead.

It's a lot more versatile and has support.

(And if you use my affiliate link, I'll get a little thank you from SQSPThemes for it!)

31 minutes ago, Kwamzilla said:

Pretty sure this is common and they're not really doing plugins anymore.

I strongly suggest using the SQSPThemes accotabs plugin instead.

 

It's a lot more versatile and has support.

Thanks for the confirmation and quick response @Kwamzilla!

I'll check it out and also the Adlytic version.

Both Adlytic and SQSPThemes do great plugins!

Just purchased an accordion solution from  @WillMyers  here https://www.will-myers.com/products/p/accordion-dropdown-plugin-for-squarespace

Very design oriented with multiple styling options already thought of and offered.

Simple to implement.

100% better than any free coded options.

And no I got no freebies. Just a really satisfied customer.

I love pure CSS solutions. If you're up for a little bit of code you can check out my solution:
https://codepen.io/DanV2/pen/WNOJMmm
 

I tried to keep the HTML lean so a client with basic skills can make edits themselves.

The scary CSS can be buried in the Custom CSS away from the client.

On 10/1/2021 at 12:32 AM, DV2 said:

I love pure CSS solutions. If you're up for a little bit of code you can check out my solution:
https://codepen.io/DanV2/pen/WNOJMmm
 

I tried to keep the HTML lean so a client with basic skills can make edits themselves.

The scary CSS can be buried in the Custom CSS away from the client.

For future comments, to use @DV2 code, add a Code Block >> Paste this code

<div class="accordion">
  
  <a href="#">Item 1
    <span>Description of Item 1</span>
  </a>
  
  <a href="#">Item 2
    <span>Description of Item 2</span>
  </a>
  
  <a href="#">Item 3
    <span>Description of Item 3 <br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
  </a>
  
    <a href="#">Item 4
    <span>Description of Item 4</span>
  </a>
</div>








<div class="about">
  <p>While making a squarespace site my client neded an accordion FAQ feature... which squarespace doesn't have in September, 2021. </p>
  <p>I've made a few pure CSS accordions before, but I didn't want to hand off complex code to "normie" clients. This is my attempt at making a PureCSS accordion with the cleanest HTML possible. I'm assuming that the CSS is hidden and won't be touched by the client.
  </p>
  <style>
    
.accordion{width:40vw; margin:2em auto;}
.accordion a{display:block; padding:10px; background:#DDF; font-size:1.5em; text-decoration:none; color:#669; margin-bottom:2px;}
.accordion a:before{content: "+"; float:right; font-size:1.5em; font-weight:700; margin:-.3em .5em -1em 0; ;}
.accordion a span{display:block; font-size:.7em; background:#FFF; overflow:hidden; max-height:0; transition:.3s; padding:0 20px; margin:10px -10px -10px -10px;}
.accordion a:focus{color:#000; background:#EEF;}
.accordion a:focus:before{content: "";}
.accordion a:focus span{max-height:80vh; transition:1.2s;}
.accordion span:before, .accordion span:after{content:""; display:block; height:20px;}




body{background:#BBB;}
.about{margin:2em; background:#EEE; width:40vw; margin:auto; padding:2em;}
  </style>
  

@DV2 Line 31 has an invalid tag