tuanphan Posted November 8, 2021 Share Posted November 8, 2021 (edited) Squarespace released an Accordion Block a few weeks ago. Here are some useful code when you use the accordion block (Add to Design > Custom CSS) #1. Change Dividers Color /* accordion divider color */ .accordion-divider { color: #ff00ff !important; } #2. Change Arrows Color /* accordion arrows color */ .accordion-block .arrow { border-color: #ffff00 !important; } #3. Add icons before Accordion Titles /* Accordion icons before titles */ li.accordion-item .accordion-item__title:before { content: ""; width: 20px; height: 20px; display: inline-block; background-repeat: no-repeat; background-size: contain; background-position: bottom center; } li.accordion-item:nth-child(1) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/11/02/15/30/tealights-6763542__340.jpg); } li.accordion-item:nth-child(2) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2019/10/23/06/30/hamburg-4570577__340.jpg); } li.accordion-item:nth-child(3) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/02/17/08/02/woman-6023442__340.jpg); } #4. Different Color for Accordion Titles /* accordion title colors */ li.accordion-item:nth-child(1) .accordion-item__title { color: red; } li.accordion-item:nth-child(2) .accordion-item__title { color: blue; } li.accordion-item:nth-child(3) .accordion-item__title { color: violet; } #5. Change a specific word color in Accordion Content First make it bold then use this CSS /* accordion content specific word color */ .accordion-item__description strong { font-weight: normal; color: red; } #6. Accordion Title Background Color /* accordion title background */ .sqs-block-accordion .accordion-item__title-wrapper { background-color: #32a4e6; } #7. Accordion Content Background /* accordion content background */ .sqs-block-accordion .accordion-item__dropdown--open { background-color: #262853; color: white; } #8. Add Unordered List in Accordion Content First, add some text then Underline them Next, use this CSS /* Accordion Content - Add Unordered list */ span[style*="text-decoration"]:before { content: ""; display: inline-block; width: 3px; height: 3px; background-color: black; vertical-align: middle; margin-right: 3px; } span[style*="text-decoration"] { text-decoration: none !important; } #9. Accordion Titles – Add Line Break If you use a Business Plan or higher, you can use another approach in this comment /* Accordion SubTitle */ li:nth-child(1) span.accordion-item__title:after { content: "Accordion Subtitle 01"; display: block; font-size: 15px; } li:nth-child(2) span.accordion-item__title:after { content: "Accordion Subtitle 02"; display: block; font-size: 15px; } li:nth-child(3) span.accordion-item__title:after { content: "Accordion Subtitle 03"; display: block; font-size: 15px; } Result #10. Accordion Title-Content Text Size on Mobile only /* accordion title - content text size on mobile */ @media screen and (max-width:767px) { /* accordion title */ span.accordion-item__title { font-size: 12px !important; } /* accordion content */ .accordion-item__description * { font-size: 10px !important; } } #11. Simple Style 01 Add a Code Block under Accordion >> Use this code <style> /* accordion title color */ .accordion-item__title-wrapper { background-color: #1a252f; color: white; padding-left: 20px !important; padding-right: 20px !important; } .accordion-item__click-target { padding-top: 15px !important; padding-bottom: 15px !important; } /* make first item round corner */ li.accordion-item:first-child .accordion-item__title-wrapper { border-top-left-radius: 10px; border-top-right-radius: 10px; } /* make last item round corner */ li.accordion-item:last-child:not[data-is-open="true"] .accordion-item__title-wrapper { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } /* remove divider between accordion items */ .accordion-divider { display: none; } /* accordion content padding */ .accordion-item__description { max-width: unset !important; padding: 20px !important; } /* arrows color */ .plus>div { color: white !important; } </style> Coming soon. #12. Accordion Content Link Style /* Links underline */ div.accordion-item__description p a { border-bottom: 1px solid black; } /* Links font style */ div.accordion-item__description p a { color: red !important; font-size: 30px; font-family: monospace; letter-spacing: 2px; } #13. Add a button inside Accordion Content First, you need to add a text link. Next, add this CSS to turn link to button /* turn accordion link to button */ div.accordion-item__description p a { background-color: black; color: white !important; padding-left: 10px; padding-right: 10px; padding-top: 15px; padding-bottom: 15px; border-color: red; border-width: 1px; border-style: solid; } #14. Add an Image inside Accordion Content Use this CSS to add image to top or bottom of accordion content /* Add an image into Accordion Content */ /* replace demo image with your image url */ /* nth-child(1) is first accordion item, nth-child(2) is second item... */ /* :before is image on top, :after if image on bottom */ li:nth-child(1) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg); background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } #14.2. Add Image to Accordion Content (Use JS code) Suppose you want to add this image https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg First, you edit Accordion >> Put your cursor at position where you want to add image >> Then enter text: image01 Next, add this code to Website Tools (under Not Linked) > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p:contains("image 01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); }); </script> <style> .image-01 { font-size: 0; } </style> Result If adding 3 images, doing this and use this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // image 01 $('div.accordion-item__description p:contains("image01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); // image 02 $('div.accordion-item__description p:contains("image02")').closest('p').addClass('image-02'); $('<img src="https://cdn.pixabay.com/photo/2023/11/07/10/06/girl-8371776_1280.png"/>').appendTo('.image-02'); // image 03 $('div.accordion-item__description p:contains("image03")').closest('p').addClass('image-03'); $('<img src="https://cdn.pixabay.com/photo/2023/10/02/14/51/flowers-8289320_1280.png"/>').appendTo('.image-03'); }); </script> <style> [class*="image-0"] { font-size: 0; } </style> #14.3. Add Image to Accordion Content You can also use this approach Enter Image Url highlight the text url > Add same image url (enable Open in New Window) then use this code to Code Injection or Page Header Code Injection <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p a:contains(".jpg")').each(function() { var $t = $(this); $(this).contents().filter(function(){ return this.nodeType != 1; }).remove(); $t.attr({ src: $t.attr('href') }) .removeAttr('href target'); $(this).replaceWith(function(){ return this.outerHTML.replace("<a", "<img").replace("</a", "</img") }); }); }); </script> <style> div.accordion-item__description img { width: 100%; margin-top: 10px; } </style> #15. Change Plus/Minus (+/-) to custom icon Replace demo image urls with your icon urls /* Plus */ :not([data-is-open="true"]) .plus { background-image: url(https://cdn.pixabay.com/photo/2021/02/06/09/03/man-5987447__340.jpg) !important; background-size: contain; background-repeat: no-repeat; } :not([data-is-open="true"]) .plus div { display: none; } /* Minus */ [data-is-open="true"] .plus { background-image: url(https://cdn.pixabay.com/photo/2021/12/12/22/17/red-squirrel-6867105__480.jpg) !important; background-size: contain; background-repeat: no-repeat; } [data-is-open="true"] .plus div { display: none; } #16. Change style of a word on Accordion Title See this comment Wrote by @tuanphan Edited December 4, 2023 by tuanphan update more code geglaja, usingmyhead, MidnightClub and 45 others 24 17 7 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
Beyondspace Posted November 8, 2021 Share Posted November 8, 2021 Impressed! Thanks for the effort tuan tuanphan, ArtSpeaks, 2Eyeballs and 1 other 3 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
ClaireWard Posted November 8, 2021 Share Posted November 8, 2021 This is so helpful, than you @tuanphan Do you know if there is a way to centre everything? Eg Headline, arrow, and content underneath, so I could centre this under the button... Link to comment
tuanphan Posted November 8, 2021 Author Share Posted November 8, 2021 9 minutes ago, ClaireWard said: This is so helpful, than you @tuanphan Do you know if there is a way to centre everything? Eg Headline, arrow, and content underneath, so I could centre this under the button... Try edit Accordion Block > Design > Title > Alignment: Choose Center If it doesn't work, you can share link to page in screenshot, we can check easier 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
tuanphan Posted November 10, 2021 Author Share Posted November 10, 2021 11 Oct. Updated #10. Accordion Size on Mobile Beyondspace and ArtSpeaks 1 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
RolandFuseHub Posted November 10, 2021 Share Posted November 10, 2021 (edited) On 11/7/2021 at 11:47 PM, tuanphan said: /* Accordion icons before titles */ li.accordion-item .accordion-item__title:before { content: ""; width: 20px; height: 20px; display: inline-block; background-repeat: no-repeat; background-size: contain; background-position: bottom center; } li.accordion-item:nth-child(1) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/11/02/15/30/tealights-6763542__340.jpg); } li.accordion-item:nth-child(2) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2019/10/23/06/30/hamburg-4570577__340.jpg); } li.accordion-item:nth-child(3) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/02/17/08/02/woman-6023442__340.jpg); } Hi @tuanphan, I tried this here: https://devmatcon2.squarespace.com/?password=sneakpeek but I am not getting the PNG's I uploaded. Very impressive list my friend! Edited November 10, 2021 by RolandFuseHub I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10. Link to comment
tuanphan Posted November 10, 2021 Author Share Posted November 10, 2021 38 minutes ago, RolandFuseHub said: Hi @tuanphan, I tried this here: https://devmatcon2.squarespace.com/?password=sneakpeek but I am not getting the PNG's I uploaded. Very impressive list my friend! I see the code worked, however the icon is very small. You can zoom browser to see it, or increase width & height in the code In screenshot I increased to width: 100px, height: 100px; 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
tuanphan Posted November 10, 2021 Author Share Posted November 10, 2021 #11. Updated new 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
RolandFuseHub Posted November 10, 2021 Share Posted November 10, 2021 5 minutes ago, tuanphan said: I see the code worked, however the icon is very small. You can zoom browser to see it, or increase width & height in the code In screenshot I increased to width: 100px, height: 100px; Icons I have used are 400px so ... ;o) I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10. Link to comment
tuanphan Posted November 10, 2021 Author Share Posted November 10, 2021 8 minutes ago, RolandFuseHub said: Icons I have used are 400px so ... ;o) but in this case the icon size will be decided by the icon container Quote li.accordion-item .accordion-item__title:before { content: ""; width: 20px; height: 20px; display: inline-block; background-repeat: no-repeat; background-size: contain; background-position: bottom center; } 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
majorscreative Posted November 11, 2021 Share Posted November 11, 2021 This is very useful. Thank you. I don't see a way to style links. I need to link to documents in my drop downs and there is currently no way to differential which text has a link. Any ideas? Link to comment
tuanphan Posted November 14, 2021 Author Share Posted November 14, 2021 On 11/12/2021 at 1:57 AM, majorscreative said: This is very useful. Thank you. I don't see a way to style links. I need to link to documents in my drop downs and there is currently no way to differential which text has a link. Any ideas? Thank for suggestion. Added Accordion Content Link Style (add underline, change font style) Add a button/image into Accordion Content 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
NIkiL Posted November 16, 2021 Share Posted November 16, 2021 Thank you! Is there a way to show the text inside the accordion in two columns? Link to comment
NIkiL Posted November 16, 2021 Share Posted November 16, 2021 (edited) Hmm... think I figured it out BUT now I have another question: /* accordion with columns inside*/ .accordion-item__description { columns: 2; column-gap: 30px; } @media screen and (max-width:640px) { .accordion-item__description { columns: 1; } } How can I now make the accordion title sticky so that people can close it easily if they don't feel like looking at the contents? Edited November 16, 2021 by NIkiL Link to comment
tuanphan Posted November 17, 2021 Author Share Posted November 17, 2021 7 hours ago, NIkiL said: Hmm... think I figured it out BUT now I have another question: /* accordion with columns inside*/ .accordion-item__description { columns: 2; column-gap: 30px; } @media screen and (max-width:640px) { .accordion-item__description { columns: 1; } } How can I now make the accordion title sticky so that people can close it easily if they don't feel like looking at the contents? #1. You can also use this shorter code @media screen and (min-width:768px) { .accordion-item__description { columns: 2; column-gap: 30px; } } #2. You can consider limit height of accordion content, then add scroll bar on right with CSS. This will be easier 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
NIkiL Posted November 17, 2021 Share Posted November 17, 2021 (edited) 17 hours ago, tuanphan said: #2. You can consider limit height of accordion content, then add scroll bar on right with CSS. This will be easier OK! What CSS would I use for this, please? Thank you for all your help! Another way to think about it: how to keep the sticky accordion title STAYING sticky even after it is closed? (I can imagine this would be complicated if there is more than one accordion in a page. I only have one accordion section in my page, though.) Edited November 17, 2021 by NIkiL Link to comment
tuanphan Posted November 18, 2021 Author Share Posted November 18, 2021 10 hours ago, NIkiL said: OK! What CSS would I use for this, please? Thank you for all your help! Another way to think about it: how to keep the sticky accordion title STAYING sticky even after it is closed? (I can imagine this would be complicated if there is more than one accordion in a page. I only have one accordion section in my page, though.) Can you share link to page where you use accordion? 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
Rasmus_SparkPlugin Posted November 18, 2021 Share Posted November 18, 2021 Thanks @tuanphan! 😃 tuanphan 1 - Rasmus Myhrberg, Founder of sparkplugin.com Link to comment
Jordy_TheShop Posted November 28, 2021 Share Posted November 28, 2021 Awesome. Thank you! 🙂 Link to comment
feelingantisocial Posted December 2, 2021 Share Posted December 2, 2021 On 11/17/2021 at 5:24 PM, tuanphan said: Can you share link to page where you use accordion? @tuanphan Hi! I am hoping to find a code to help me with the new accordion feature. The accordion is popping up underneath my photo, to the left of my product description on desktop, and I would like the order to be 1.product title, 2.price, 3.description, 4.accordion, 5.add to cart button. On mobile view the order is 1.product title, 2.price, 3.add to cart button, 4.description, 5.accordion Let me know if you can help me! I'm desperate lol. I've attached screenshots! Thank you! Link to comment
tuanphan Posted December 2, 2021 Author Share Posted December 2, 2021 3 hours ago, feelingantisocial said: @tuanphan Hi! I am hoping to find a code to help me with the new accordion feature. The accordion is popping up underneath my photo, to the left of my product description on desktop, and I would like the order to be 1.product title, 2.price, 3.description, 4.accordion, 5.add to cart button. On mobile view the order is 1.product title, 2.price, 3.add to cart button, 4.description, 5.accordion Let me know if you can help me! I'm desperate lol. I've attached screenshots! Thank you! Can you share link to product? We can check easier 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
The-Design-Order Posted December 8, 2021 Share Posted December 8, 2021 Thanks so much for this @tuanphan! You are a superstar! Link to comment
Gazza Posted December 13, 2021 Share Posted December 13, 2021 (edited) @tuanphan thanks for sharing this--most helpful. In the works to recreate an old accordion on a website using the new accordion block but cannot figure out how to replace the +/- with a graphic or a simple css-styled arrow like this: border: 8px solid transparent; border-top: 8px solid #8eaf7d; border-bottom: 0 none; (closed and open versions of course) Any clues to how this may be attempted? Edited December 13, 2021 by Gazza added clarification Link to comment
tuanphan Posted December 16, 2021 Author Share Posted December 16, 2021 On 12/14/2021 at 4:26 AM, Gazza said: @tuanphan thanks for sharing this--most helpful. In the works to recreate an old accordion on a website using the new accordion block but cannot figure out how to replace the +/- with a graphic or a simple css-styled arrow like this: border: 8px solid transparent; border-top: 8px solid #8eaf7d; border-bottom: 0 none; (closed and open versions of course) Any clues to how this may be attempted? Use this CSS /* Plus */ :not([data-is-open="true"]) .plus { background-image: url(https://cdn.pixabay.com/photo/2021/02/06/09/03/man-5987447__340.jpg) !important; background-size: contain; background-repeat: no-repeat; } :not([data-is-open="true"]) .plus div { display: none; } /* Minus */ [data-is-open="true"] .plus { background-image: url(https://cdn.pixabay.com/photo/2021/12/12/22/17/red-squirrel-6867105__480.jpg) !important; background-size: contain; background-repeat: no-repeat; } [data-is-open="true"] .plus div { display: none; } 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
loriskumo Posted December 23, 2021 Share Posted December 23, 2021 Awesome thread, thanks a lot! I have a question about anchor links. I was wondering if it was possible to target a specific accordion item with an anchor link AND automatically open the accordion itself. For the moment I simply managed to target the accordion title, but not to open the accordion itself. 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