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

Search the Community

Showing results for tags 'accordion'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. 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 */ } #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
  2. Site URL: https://www.drinkdurham.com/vendors I'm having trouble with the icon changing from a plus to a minus when the drawer opens. Help! It would also be great to know what code to add so that only one drawer is open at a time. THANKS!
  3. Hi Tuan! My page is https://www.nuligoods.com/shop/p/grey-blazer I'm trying to move the accordion into the "product description" space. Is this possible? Currently I used the built-in accordion function in the "additional info" section. If you have any suggestions on getting an accordion function (markdown? custom CSS code?) to this position I would be so grateful. I'd want to be able to replicate it for each product I'll add Thank you!!
  4. Site URL: https://www.izzisbeads.com/izzisbeads/p/bestie-sets So as you can see this page looks clunky. Ive been able to use css to change the font in the variant options to my font but there are a few things i cant figure out. 1: how to change the size of the font in the variant options 2: how to change the layout so the buttons dont take up so much space and are just directly down from one another. Id like the buttons to have less space between them on this page and to have my accordian just below my pictures. It looks weird how much space the buttons use and how the accordian is so far down. 3: Id also like to be able to change the appearance of the variant buttons to match my site styles the password to access the site is beads Im new to all of this so any help is appreciated
  5. My drop down currently looks like this, but I only want the headers to be visible. What am I doing wrong? Here is the syntax: ## + 3/3rds Process & Learn to Follow Jesus Learn how to facilitate a Disciple Making Group meeting and become a faithful follower of Christ. <br> <center><span style=";background-color:#000000;border-radius:10px;padding-right:2em; padding-left:2em; padding-top:1em; padding-bottom:1em; font-size: 18px; color:white"><a href="/s/LTFJBookmark.pdf" target="_blank">Learn How</a> </span></center> ## + Vision Casting Check out our process for building teams of students who multiply disciples. <br> <center><span style=";background-color:#000000;border-radius:10px;padding-right:2em; padding-left:2em; padding-top:1em; padding-bottom:1em; font-size: 18px; color:white"><a href="/s/VisionCastingBookmark.pdf" target="_blank">Check it Out</a> </span></center> ## + 411 Training Learn how to start sharing your faith right away. <br> <center><span style=";background-color:#000000;border-radius:10px;padding-right:2em; padding-left:2em; padding-top:1em; padding-bottom:1em; font-size: 18px; color:white"><a href="/s/411TrainingBookmark.pdf" target="_blank">Train Now</a> </span></center> ## + Team Meeting Format Learn how to start a team at your school and facilitate team meetings. <br> <center><span style=";background-color:#000000;border-radius:10px;padding-right:2em; padding-left:2em; padding-top:1em; padding-bottom:1em; font-size: 18px; color:white"><a href="/s/TeamMeetingBookmark.pdf" target="_blank">Start a Team</a> </span></center>
  6. Hey, I would really love to know how to have 2 different accordion blocks appear side by side on mobile view or how to have the items from a single accordion block listed side by side in 2 columns.
  7. Site URL: https://tiffanyponce.squarespace.com/ Hello, Is there any way to add bullet points within the accordion? Like the content details.
  8. Site URL: https://edu.ifixit.com/fast-fix-project-faq#two I added anchor links to my accordion menu using the markdown block and some CSS and jQuery, but I would like the question to expand automatically when the anchor links are used. The rest of the page functions just how I would like—users that end up on the page organically can toggle through each question—but when I send a specific anchor link to a user, I'd like the question to automatically expand. I'd ideally like to find a way to do this that also doesn't mess with the spacing or the hover color. I'm using Squarespace 7.0 with the Bedford template.
  9. Site URL: https://honeybabeherbs.squarespace.com I'm working in v7.1 and I'd like the "additional info" block from my product listing (which I've formatted as an accordion) to be below the product description and above the add to cart button as sketched below. I've read so many threads about this but haven't found anything that will work for me? Would like this format for each product listing but willing to edit each one individually. I'd also like to keep the accordion functionality and have them be condensed as default. https://honeybabeherbs.squarespace.com/ Password is Calendula
  10. hi there! can anyone help with adding an accordion to my product description? i would like the have a "product details" section like the attached screenshot. thank you!
  11. Site URL: https://www.velocitta.it Hello, I am trying to make two different accordions in one of my page (it is the program of a festival wich develops in 2 days, I really like the hide and see accordion feature, so I am trying to customize the accordions and make it work for my specific case) Here is my situation: I have 2 accordions for the 2 days (Saturday, Sunday) one next to each other ; in every accordion I have multiple items ; every item is one event ; every event has an icon wich refers to the 'type' of event (bike ride, food, game, talk, ...) I succeeded in putting this icons by adding some CSS and following @tuanphan codes injection. My problem now is for example: the Item 1 of Accordion 1 (Saturday) has the 'food' icon ; but the Item 1 of Accordion 2 should have the 'game' icon. But since it is the 1st Item it will automatically give the same icon since he considers I have 1 accordion only. Is there a way to name differently the 2 accordions so that they are not linked? Do you have any advise? Thank you !!
  12. Site URL: https://longleaflp.com/attorneys/James-c-mccaskill/ Hi, I'm looking for custom code or plugin that like the attached image. Here is the link for reference, it is located at the bottom of the page. https://longleaflp.com/attorneys/James-c-mccaskill/ Thank you! Chris
  13. Site URL: https://www.crowncreative.co I'm looking to recreate the same page layout/style below using the accordion block and maybe a plugin: https://sloestudios.com/services Can anyone tell me how I can click a link on a page that would then open up the accordion block? Has anyone found a plugin/code to achieve this or close to this? Thanks in advance.
  14. Hi, This is a very useful list. Thank you for sharing! Requesting help on a modification to the unordered list code shared by @tuanphan. Is it possible to create a hanging indent bulleted effect in the content of an accordion item for a) all the content sentences b) for specific sentences/lines in the content? something like a un-bulleted first sentence/line, a couple of bulleted sentences/lines and then a closing un-bulleted sentence/line, in the same accordion item. Many thanks in advance. regards.
  15. Site URL: https://greenandgrainy.co.uk Hi everyone, Is it possible to change a piece of text content in one place and have all accordion blocks update automatically? I have 30 products on my site, I want to use the accordion block to display shipping costs etc. and the info is the same for each product. Currently I have to manually update each product every time there is a change to this site-wide info, is there a way of writing the blurb or content in one place and have this feed or inform the text on the accordion block on every product automatically? Thanks in advance, Teddie
  16. Site URL: https://northernresourcetrucking.squarespace.com/ Hi, I am trying to add a button in accordion description. How is that possible?
  17. Site URL: https://www.livesimplyfarms.com/faqs Hello, I'm trying to add an image code to the accordion section I have on my website. For instance: <html> <body> <img src="map.png" alt="Pinellas Map" width="500" > </body> </html> I cannot add a code block within another section. How can I add my map image to my drop down? Thanks! Angel
  18. Site URL: https://yorhealthspace.com Hey ya'll, Has anyone else's accordion block disappeared? Specifically in the "additional informatiol" section of product detail pages?
  19. Bold/Italic/Underline and Link....not able to use on Accordion at this time. Tested in existing and a fresh site. Any info on when this will be fixed? Clicking on one of the buttons closes the "edit" window for the Accordion. Please Help...Thanks!!
  20. Site URL: http://www.bespoke-reps.com Hi everyone! I am curious how I can make columns of text in 1 specific accordion dropdown menu. I don't want paragraphs on all accordion drop-downs in the group only of of the few I have created. Thank you!
  21. Accordion or collapsible menus are considered one of the workhorses of web design for good reason. They’re a versatile tool for text heavy pages on a website, like those showcasing a list of Frequently Asked Questions (FAQ), and they also help keep your pages short and reduce scrolling fatigue for your readers. They can solve potential design problems, like too much content or too little real estate on the page, and they can provide an intuitive direction for users to explore the information that they need and collapse the information that they don’t. In Squarespace, if you’d like to add an accordion menu to your site you would need to use an Accordion Block. Accordion Blocks have their own styling options that you can customize to get the look and feel you want for your site. If the available customizations don't cover your needs, our community member Tuanphan created a handy list of useful code for the Accordion Block. Are you planning on using the Accordion Block? Do you already use one on your site? What are your best practices for the effective use of an accordion menu? Share your thoughts with us in the comments below!
  22. I found some great code that easily and perfectly changes the color of the arrows to expand the accordion, but I can't find the right word to swap with '.arrow' in this code snippet below to change the color of the plus sign option. I've tried '.plus' and '.cross' etc...but can't figure it out! Anyone know what Squarespace calls the plus sign on the back-end? Thank you 🙂 /* accordion arrows color */ .accordion-block .arrow { border-color: #ffff00 !important; }
  23. Site URL: https://blissbabysitters.squarespace.com/ Hi @tuanphan - is there a way we can remove the expanding icon altogether?
  24. Hi, I have some questions around padding for version 7.1: How do I reduce the space between the site header and my product? How do I reduce the space between Quantity and Add to cart? I'd also like to move up the drop downs I created of 'ingredients' and 'instructions' under product additional information to be in line with the product description instead of having it distinctly below. Thank you so much for the help!
  25. Site URL: https://www.kdigitalstudio.com/how-to-create-digital-products So I've managed to style the accordion blocks like how I envisioned on my course page, but it's still not quite perfect. I would like it if there are more padding between the text and the rounded rectangle/rectangle of each individual dropdown. Likewise, I'd like more padding between the edge of rounded rectangle and the down arrow. How can I achieve this with CSS? Here's the code I have so far: .sqs-block-accordion .accordion-item__title-wrapper {background: #ffffff; margin: 15px; padding: 0px; border: 1px solid black; border-radius: 25px; flex: 1;} .sqs-block-accordion .accordion-item__description { margin-left: 35px }
  • Create New...