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. This may be a long shot, but is there ANY way to add images to an accordion menu? I have a partners page where the logos would look much better if they were hidden in an accordion menu, but from what I see, there's no option for that...
  2. 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
  3. Site URL: https://tiffanyponce.squarespace.com/ Hello, Is there any way to add bullet points within the accordion? Like the content details.
  4. Site URL: https://www.rootsandbranches.center/ https://www.rootsandbranches.center/ Hi, I've embedded a contact form from HoneyBook (3rd party). But it is so long! I'd like to condense the space it uses and instead be able to scroll within the section. If that's not possible, then I'd like the section to open like an accordion. Is there a way to do either one? I just don't want the form to monopolize the whole page and make it annoying to get to the rest of the content. Thanks!
  5. Site URL: https://cat-wedge-xh9c.squarespace.com/programs I'm trying to create a list of the programs and services that we offer at the Community Center where I work. We're a small non-profit which is why I am doing 20 jobs and learning them as I go. I want two buttons to appear inside each accordion drop-down. One that says "Learn More" and one that says "Volunteer". I've figured out how to get the button in there. I've even figured out how to make it look decent, but it is changing EVERY link/button on my page when I do that and making them all look crazy. Here is the code I was using. I don't even remember where I found it. (The button won't link to google, obv, I just haven't gotten very far yet.) The password to the website is: bft2020 <style> a:link, a:visited { background-color: #00B0B9; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block;} </style> <a href="https://google.com" target="_blank">Volunteer</a>
  6. Site URL: https://villageacupuncture.squarespace.com/treatments When I expand an accordion (Adjunct Therapies section), the text block next to it also gets pushed down. Does anyone know how to fix this? villageacupuncture.squarespace.com/treatments pw: va2022
  7. Site URL: https://www.lildarkartz.com/ Can an accordion menu open upwards, towards the top of the site?
  8. Site URL: https://www.craigkleila.com/ Password to site is "password" On the homepage, when I open and close the accordion menu, the image on the left moves. How can I prevent this?
  9. 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.
  10. 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!!
  11. The default action is a zoom in on the same picture no matter which accordion item is clicked. Is there a way to assign a picture to a specific accordion section and for it to change to that picture when it's clicked?
  12. Can I get help with adding code to make sure that I have a second line for titles while using the accordion feature on squarespace. Currently i can only have two lines when the text runs over due to the length of the box size.
  13. Hi- I'm trying to add multiple images in the drop down description area of the accordian block. I need to add anywhere between 2 -8 depending on the line item. I was able to add only one image using this code- but this won't work for my needs. Thank you!: /* 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... */ 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. 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. Hello all, Wondering if somebody can help me with this. I'm looking to create a footer where a list of URLs collapse into an accordion on mobile only. I would like this to work in the same way as how the footer works on squarespace.com. I've found this approach on stack overflow, which appears like it should work, but i'm unsure of how to integrate the jquery portion of the code. I presume it needs to be tweaked in order to work within the header/footer within code injection, but I can't seem to get it working. Also, very happy to look at a different approach if there's something that might be more suitable to a squarespace site. Any advise would really be appreciated. Thanks, Neal
  16. I want to link text within a FAQ accordion block to another page within the site. I have linked text within a text block. is there a method for doing the same within accordion block text?
  17. Hi, Can you add a product block inside an accordion? I'd like to add the "Add to Cart" button inside my accordions, so people can buy the product. Thanks, Anthony
  18. Site URL: https://blue-lily-kr8r.squarespace.com/omnipathology Hi Everyone, So, I am using Fluid Engine to build out a site and I'm having an issue which may be a bug? Go here: https://blue-lily-kr8r.squarespace.com/omnipathology Password: Omni When you go on the page click open the accordion. The image block I have next to it moves with the opening of the accordion! Ahhhh!!!!! I've stripped out all of my custom code and still having the issue! AHHH! Anyone have any thoughts as to why this is happening? Suggestions? Thanks, -Brian-
  19. Hey guys, Trying to see before I start this site how to create full width accordion dropdown. Wireframe reference attached.
  20. 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!
  21. Site URL: https://www.mbimagery.co.uk/cotswold-photography-workshop Hi folks, I'm not very good at all this (eye rolls begin), I'm wanting to drop an image in to one of my accordion drop downs, I see the coding on #14.... But I've tried to insert it through Design>Custom CSS.... But how much of this code do I paste in to the space? How do I get this to one of the drop downs in the Accordion block? I'm just soooo confused. Can anyone help in an 'insert code for dummies' kind of way please? A walk through... Holding my hand 😉 Much appreciated folks. Mark.
  22. Site URL: https://fox-chihuahua-df3j.squarespace.com/projects/tumblrmobile Hi, i'm trying to make a clickable expandable piece of text (like an accordion but not a +/- menu, more like a button that shows/hides text) I've used a markdown block to get the text show/hide feature, as shown: (hidden) (on click) However, I'd like the pink text to look more like (and act like) a button instead. Like this, where it also reacts on hover. Perhaps a markdown block isn't the best way to create a show/hide feature with a button, so if anyone knows how to make a button that shows/hides text that'd be really useful, thank you!
  23. I have a few accordion blocks on my site. When I added the preset design page the 3 accordion blocks have text that wraps all the way to the edge. The blocks I added after have padding on the right side. I can't figure out how to fix this! Thanks so much.
  24. Hello! My client would like the text in this accordion to have even margins across the page. Does anyone know where I can adjust this in the new editor, or is there some css I should use? Thank you! Sarah
  25. Hi all, I am trying to make a "Our Team" section. I need it to be clean and simple, so just 4 headshots, 1-2 sentences below each, and a "read more" or button to expand. Upon expansion, I'd like a new section to appear (not in a new window/tab) with the full bio of the person who was clicked. The first screenshot is a great example of what I want, but I need the unselected pictures to be greyed out, or something to indicate which name belongs to whom. Second screenshot would also be acceptable. 3rd screenshot is the sketch I made when first imagining this section. It is my favorite example, but I understand it might be too custom to come to reality for this small project. I'm using 7.1. Thanks in advance for your help or for pointing me to some code I can copy/paste for this effect.
  • Create New...