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

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


dizzyd

Question

Recommended Posts

  • 0

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!

Edited by dizzyd
Initial Revision
Link to comment
  • 0

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:"- ";}

Link to comment
  • 0

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

Specialising in Squarespace CSS and customisation. Always open to collaborate on projects with fellow Squarespacers!

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me by buying me a coffee.

Squarespace Tips & Tricks: SquareSkills.dev (resource & tutorial site coming soon)

Design, Development & Branding: KwameAnd.co (new portfolio site coming soon)

Link to comment
  • 0

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

Edited by AskQuesty
Initial Revision

Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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! ☺️

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

 

Link to comment
  • 0
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

ezgif-3-2b13bd6cea.gif.88459be19c86c1e73e6c8396f8125c5d.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.

Edited by Insider
Link to comment
  • 0
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!)

Edited by Kwamzilla
Adding Affiliate Disclaimer

Specialising in Squarespace CSS and customisation. Always open to collaborate on projects with fellow Squarespacers!

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me by buying me a coffee.

Squarespace Tips & Tricks: SquareSkills.dev (resource & tutorial site coming soon)

Design, Development & Branding: KwameAnd.co (new portfolio site coming soon)

Link to comment
  • 0

Both Adlytic and SQSPThemes do great plugins!

Specialising in Squarespace CSS and customisation. Always open to collaborate on projects with fellow Squarespacers!

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me by buying me a coffee.

Squarespace Tips & Tricks: SquareSkills.dev (resource & tutorial site coming soon)

Design, Development & Branding: KwameAnd.co (new portfolio site coming soon)

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
18 hours ago, tuanphan said:

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

 

This worked great! But how do I remove the padding on mobile? It looks like the attached pic now. 

Tried to add the following but didn't change anything:

@media screen and (max-width:767px) {
  #block-yui_3_17_2_1_1633265646658_24065 {
   padding-left: 0;
    padding-right: 0;
}
  }

Screenshot 2021-10-04 at 11.11.03 AM.png

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...