dizzyd Posted January 14, 2017 Share Posted January 14, 2017 (edited) 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). Edited January 14, 2017 by dizzyd Initial Revision caol and GregoryJ 2 Link to comment
conradseto Posted January 15, 2017 Share Posted January 15, 2017 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 Link to comment
conradseto Posted January 17, 2017 Share Posted January 17, 2017 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. Link to comment
dizzyd Posted March 1, 2017 Author Share Posted March 1, 2017 (edited) 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 March 1, 2017 by dizzyd Initial Revision Link to comment
dizzyd Posted March 12, 2017 Author Share Posted March 12, 2017 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
ajaykaran9211 Posted May 24, 2017 Share Posted May 24, 2017 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. Hello Link to comment
SquareStudio Posted May 3, 2018 Share Posted May 3, 2018 This accordion has the animation your looking for, and it can house any Squarespace blocks.Works with all templates :) ---> Content Accordion Link to comment
dozzi Posted August 2, 2018 Share Posted August 2, 2018 Any updates on this? Can't get it to work now. Link to comment
dozzi Posted August 2, 2018 Share Posted August 2, 2018 Any updates on this? Can't get it to work now. @SquareStudio @dizzyd @conrads Link to comment
KwameAndCo Posted October 30, 2018 Share Posted October 30, 2018 This is fab - do you know if there is a way of styling it? Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. 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 or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
AskQuesty Posted June 5, 2019 Share Posted June 5, 2019 (edited) 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 June 5, 2019 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
lisanemetz Posted April 5, 2021 Share Posted April 5, 2021 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! Link to comment
tuanphan Posted April 5, 2021 Share Posted April 5, 2021 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. lisanemetz 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lisanemetz Posted April 8, 2021 Share Posted April 8, 2021 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
tuanphan Posted April 12, 2021 Share Posted April 12, 2021 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
meredithdesignco Posted July 8, 2021 Share Posted July 8, 2021 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? Beyondspace 1 Link to comment
meredithdesignco Posted July 8, 2021 Share Posted July 8, 2021 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: Link to comment
tuanphan Posted July 10, 2021 Share Posted July 10, 2021 On 7/9/2021 at 3:35 AM, meredithdesignco said: Your site is private. Can you setup password & share url again? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Insider Posted August 12, 2021 Share Posted August 12, 2021 (edited) 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. Edited August 12, 2021 by Insider Link to comment
KwameAndCo Posted August 12, 2021 Share Posted August 12, 2021 (edited) 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 October 8, 2021 by Kwamzilla Adding Affiliate Disclaimer Insider 1 Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. 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 or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
Insider Posted August 12, 2021 Share Posted August 12, 2021 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. KwameAndCo 1 Link to comment
KwameAndCo Posted August 13, 2021 Share Posted August 13, 2021 Both Adlytic and SQSPThemes do great plugins! Insider 1 Work With Me 🖥️💻📱 Please remember to tag me so that I get a notification and respond to your help requests. 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 or make requests by buying me a coffee ☕. (Caffeine fuels me to take more requests) For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials) For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩 Some links may be affiliate/referral links. Link to comment
Insider Posted August 25, 2021 Share Posted August 25, 2021 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. WillMyers and tuanphan 1 1 Link to comment
DV2 Posted September 30, 2021 Share Posted September 30, 2021 (edited) 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. Edited October 1, 2021 by DV2 fix typo creedon 1 Link to comment
tuanphan Posted October 3, 2021 Share Posted October 3, 2021 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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