Jump to content

Search the Community

Showing results for tags 'accordion'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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. 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!!
  2. I added some custom code to my website, but it doesn't look mobile-friendly, is there a way to fix this? <1>: counter <2>:custom tab button
  3. Howdy! I'm looking for help on a specific issue I'm currently facing on my SquareSpace website. I've added pictures on which the text in form/markdown is left to right, I'm trying to get Right to Left for the title and the text beneath. as well as the form. the language is in Hebrew which is Right to Left how can i change the CSS code to RTL (right to left) that it will affect only the needed segments. If possible, can someone add the exact code that I can copy it? Thanks 🙂
  4. Site URL: https://www.biofabricate.co/about Hi, I was wondering if anyone can help with a bit of custom CSS - I want to change the font style in my accordion description from paragraph to heading. At the moment the only choice is paragraph styles! Thanks 🙂
  5. hello, could someone share advice on how to either: a) remove the icon from the accordion block or b) change the distance so the icon is right next to the text? thank you!
  6. Hi there, can someone help me out with some CSS code? The issue is the following: By using a toggle button (is that what it's called?) different texts should be displayed. I have added an image as an example. So for Social Recruiting a different text and a different image should be displayed than if the button is for example on Freelance Staffing. Thank you in advance!
  7. I am trying to add icon dropdown lists for my services. I want the bottom portion of the icons to dropdown and reveal information upon clicking, and slightly open when hovering over them (on mobile just clickable). I have attached images of the icons, along with what I want them to look like upon being opened. What steps can I take to accomplish this? Thank you for any input.
  8. Hey there! Has anyone used the same "Additional Information" on all their product pages in Squarespace 7.1? For example, I am creating a "Wear & Care" Accordion in the additional information section for a product and it would be useful to duplicate this on all products across a category ! Thoughts?
  9. Hi, I have two accordion blocks next to eachother, but when opening the one accordion, the other accordion is moving down, as well as all the other content. Is there a way to fix the content on the left, when opening the accordion on the right (and vice versa) ? Thanks in advance. Jan Website: https://magenta-onion-c329.squarespace.com/wie Password: webtailor2022
  10. I would like to get/purchase version 7.1. How do I get it?
  11. I have an image next to an accordion block. I want the image to change depending on what accordion item is opened. how can I do this in code?
  12. Hi! We just launched our new website and unfortunately have found one of our most necessary features - the accordion/hamburger icon menu does not work on Apple devices (iPhones) that we've tested. Any help here? Works beautifully on PC and Android devices. Any help really appreciated! I'm not sure where to start with fixing this and our official launch is this weekend. (side note: this icon worked during dev/testing on iPhone before I connected my domain to our godaddy acct)
  13. I have 4 accordions in my accordion block. I have a check mark as the first word in each of the titles. I'd like to change the colour of the check marks to yellow while the the rest of the text in the titles stays black. Squarespace doesn't have a feature for this and site styles changes the colour for the entire title not just the one word. How can I achieve this? Thanks!
  14. 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?
  15. I found this video linked in another thread about this: But is there anyway to do this but instead of a number or bullet point, do a list ordered "a." "b." "c."? And then, can I get a sub-list under one of those labeled "i." "ii." "iii."? I want it to look like this below, but it seems impossible to do inside the accordion.
  16. No experience with coding here. Trying to use code from this: https://codepen.io/payam13/pen/BaPQKxz but it isn't working on my site, ultimately I want to add a video in each of the accordion drop down tabs. Any suggestions? If this specific accordion won't work with video, are there others I can use?
  17. Hi, how can I have a link that's within an accordion open in a new tab? To see an example, go to the following web page (see below), scroll to the 2nd accordion, click on its first row ('How to register'), and click on the link within it. I want that link to open in a new tab (target=_blank). https://mandolin-terrier-tzne.squarespace.com/classes password: Todd Thanks!
  18. Hi - we have text links in an accordion, but unfortunately, Squarespace doesn't allow for making these a color, like standard text. Does anyone have code that will color text links inside an accordion. Thanks in advance.
  19. Hi all, I am attempting to move this accordion block above the add to cart button and the "no risk return..." text on on my product pages. I've tried to use some code from forum posts like this in the past, but to no avail. Any help would be so appreciated! (I would need to be able to replicate this custom placement on every product page.) And, maybe I should clarify that I would need the accordion to be half its current size, too. Wouldn't want it jutting out. Thanks in advance, Rosa
  20. 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
  21. Site URL: https://rose-sponge-jyn3.squarespace.com/config/ I want the accordion block to be vertical like this? https://www.gtheimagineers.com/en.html
  22. I am hoping someone can help me! I am getting tired of using accordions for extra information so I am looking for relatively easy coding to create popup/lightbox text when someone clicks underlined text or even an image. I want to use this on my "MEET THE TEAM" page. Looking for any and all suggestions on how to accomplish this.
  23. Hi Forum! Is there any way I can force an accordian block to allow more than one entry to stay open at the same time? (I just need it for one page not all pages where the accordian features). The standard behaviour for accordian blocks is for the user to select the '+' and the entry expands. But when the user selects a different '+', that entry closes and the new one expands. Is there any way I can force the accordian to keep as many open until the user collapses each entry? Thanks so much in adavance for your support. Smiles, Jo
  24. It seems like there is only one format for video input when you click 'Video', which is unnecessarily large and looks like a YouTube video when on the screen which makes it look sloppy. I'm wondering if there is more subtle option. If anyone has any suggestions or pointers it'd be appreciated!
  25. Hi All, I have more than one accordion block on different pages. Each one I would like to individually target with different images that appear in each drop down. Here is the code I have for one specific accordion block: li:nth-child(1) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ width: 150px; /* image height */ background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9dec3f500a77c50405f5c/1673125571092/scale.png) ; background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } li:nth-child(2) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ width: 150px; /* image height */ background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9ec35733e724e83427a1b/1673129013381/Schedule.pnghttps://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9dec3f500a77c50405f5c/1673125571092/scale.png) ; background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } li:nth-child(3) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ width: 150px; /* image height */ background-image: url(https://static1.squarespace.com/static/6386f2afa98d287844340fc9/t/63b9ed1e3076140ca487fec6/1673129246797/ShipmentTracking.png) ; background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } The problem is I have another accordion block elsewhere on the site that is picking up this code and I don't want it to. The block ID # is "#block-yui_3_17_2_1_1673123629170_6403" for the accordion block I'd like to target the above code to. My question is where do I put the block ID# in the above code to isolate the code to ONLY affect this one specific accordion block? I know this seems like a dumb question but nothing I have tried works. Thanks for any help on this.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.