Niklaschr Posted February 9, 2023 Share Posted February 9, 2023 Hi! How do I make my accordion do this when expanded? PS:Picture above is from Figma This is how I currently have it on my website I have styled the accordion through CSS Any help would be nice! Link to comment
Ziggy Posted February 10, 2023 Share Posted February 10, 2023 Can you share your URL and this page? Also the styling CSS that you're using currently? Thanks! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Niklaschr Posted February 18, 2023 Author Share Posted February 18, 2023 Hi! Sorry for late response Davmar.no/ny-hjemmetjenester PW: Password123 Using this, + some lines regarding the icon, but that isn't relevant to the question @accordionTitleBackground: #fcfcfc; section[data-section-id="63e5407deda50f66a15788c2"]{ // Accordion title background .sqs-block-accordion .accordion-item__title-wrapper { background-color: @accordionTitleBackground; } span.accordion-item__title { font-weight: 500 !important; color: black } // Accordion title padding .accordion-item__title-wrapper { padding-left: 50px !important; padding-right: 20px !important; border: 1px solid #64D767; border-radius: 15px; filter: drop-shadow(0px 14px 42px rgba(20, 20, 43, 0.14)); margin: 10px; } Thanks in advanced! Link to comment
tuanphan Posted February 21, 2023 Share Posted February 21, 2023 On 2/18/2023 at 9:10 PM, Niklaschr said: Hi! Sorry for late response Davmar.no/ny-hjemmetjenester PW: Password123 Using this, + some lines regarding the icon, but that isn't relevant to the question @accordionTitleBackground: #fcfcfc; section[data-section-id="63e5407deda50f66a15788c2"]{ // Accordion title background .sqs-block-accordion .accordion-item__title-wrapper { background-color: @accordionTitleBackground; } span.accordion-item__title { font-weight: 500 !important; color: black } // Accordion title padding .accordion-item__title-wrapper { padding-left: 50px !important; padding-right: 20px !important; border: 1px solid #64D767; border-radius: 15px; filter: drop-shadow(0px 14px 42px rgba(20, 20, 43, 0.14)); margin: 10px; } Thanks in advanced! Password123 Incorrect password 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
Niklaschr Posted February 26, 2023 Author Share Posted February 26, 2023 What? try again, I change it back to Passord123Davmar.no/ny-hjemmetjenester Link to comment
Solution Ziggy Posted February 27, 2023 Solution Share Posted February 27, 2023 You'll want to replace the last part of your CSS with this: .sqs-block-accordion .accordion-item { padding-left: 50px !important; padding-right: 20px !important; border: 1px solid #64d767; border-radius: 15px; filter: drop-shadow(0px 14px 42px rgba(20,20,43,.14)); margin: 10px; } This new code includes the question and answer with the border and padding. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Niklaschr Posted February 27, 2023 Author Share Posted February 27, 2023 Thank you! Worked as a charm 🙂 Ziggy 1 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