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 /* 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 */ } Wrote by @tuanphan
  2. Site URL: https://studiogently.com/branding-photography Hey all, Would love to know if anyone has managed to make the Accordion block full-width, rather than 70% as it is now? It's not so great on smaller screens in particular and just seems like a bit of a waste of space 🙂
  3. Site URL: https://keyboard-lychee-yxll.squarespace.com/ Hello! I am trying to align my accordion elements so they are vertically centered in the container/to the image to the right. I have this problem in several spots on multiple pages: Lodge Rentals + Weddings & Pricing. For this section on the Lodge Rentals page (the first instance of the accordion problem on this page) I tried using the code div#yui_3_17_2_1_1637677097813_165.row.sqs-row { display: flex; align-items: center; } And still the accordion element is not aligning to the center! If you anyone can provide a code that works for this section, I should be able to apply it to the other sections on the website. Thank you!
  4. Site URL: http://kyracoatesart.com Hey everyone! I need to collapse my product descriptions on my product detail page into an accordion style. I have tried using code from other people asking similar questions on this forum. I added the code and the Markdown block on the additional info section of the product page. The problem is then all the details end up ABOVE the title, price, and add to cart button for this product. They also don't seem to collapse into an accordion. I did have someone add custom code to make the price and add to cart button be above all descriptions, which is not standard for this template. You can see in screen-shots below. What I need is for the title, price and add to cart button stay at the top and the accordion to be below. I have ZERO coding experience, so I appreciate any help you can offer!
  5. Site URL: https://steven.squarespace.com I have an accordion block on my website that looks like a nav menu. The accordion has two items: 'Team' and 'Partners'. I would like to disable expandability on the 'Partners' item. In other words, when you click on 'Partners', it should not open. I will then turn the item title into a clickable link, hopefully. Thank you in advance.
  6. Site URL: http://www.ecobuni.co.nz I'm not that new to coding but im new to coding in Squarespace. How on earth do I add an accordion block to every product page description? My descriptions are much too long and I need my customers to be able to see the checkout button, price etc. right away. Please help!
  7. 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!
  8. I discovered that Squarespace doesn't have any accordion/toggle styling that can be used for FAQs, etc. I was directed to come here and ask how to do it. I was hoping to have something that looks like this (see attached image).
  9. Site URL: http://kimpercival.com When I click on my accordion drop down, the background doesn't expand to be able to see all the text. I cannot figure out how to address this. See images below for an example. Any assistance would be appreciated. I am using Brine template in 7.0
  10. How could I create an accordion that, when clicked, reveals a blog post(s) from Squarespace? Basically I have about 5 sections I would like to use in my accordion for the titles and I have groups of blog posts that I want revealed for each drop down. Thank you!
  11. 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.
  12. Site URL: https://www.douglasmack.net/accordion-test-page I'm using the accordion tool and I would like the description text to fill the width of the box (or at least get a lot closer), rather than having such a large right margin/padding. I can't find this in the accordion options. Am I missing something? Or is there a way to adjust this with custom CSS? Thanks!
  13. Hi, I currently have 7.1 site there are things I like about it but I think that 7.0 will better suit my brand. Before I make the switch I have questions: Is the accordion feature available in 7.0? Can you connect to Squareup to sell in person? (7.1 allows this) click on Sell Now and as you sell the products are marked Sold Is the afterpay feature available in 7.0? I'm eligible and use it on my site now. I will have to start over can I import my products from 7.1 to 7.0? or will I have to re-upload? Thanks!
  14. Site URL: https://www.tribeandsol.com/shop Hi, I went to additional info and added the accordion insert from menu options but it is not aligning properly under the product description before the add to cart button. Can you help with this? Also, do I have to add accordion manual to each product or is there a way to do is across the site I have over 500 products. This is my current shops page https://www.tribeandsol.com/shop I want it to look like this:
  15. Site URL: https://www.chloebarnes03.com/ Hello, I'm trying to upload different logo icons to replace the bullet points on this accordion block. I've gotten as far as replacing the bullet for an image but I can't figure out how to call out a singular list item to change the image on that specific bullet point. PW to site: CHLO32021
  16. I am looking to add either markdown or html code blocks into the new accordion. Use case: I am looking to create expandable/collapsible sections that showcase a video and written directions Is this doable with the new accordion or am I better off trying to make something using markdown?
  17. Site URL: https://oakpointpartners.com/ I want to recreate a similar hover reveal to this website: https://www.domo.com/solution/overview I like the smooth transitioning and how the title never leaves. It just slides to the top. I also like hover hovering over the blocks adds a drop shadow. Any ideas to get started with creating this? https://oakpointpartners.com/oak-point-remnant-asset-case-studies I'm currently playing around and have currently done the following: On hover the first image transitions to a second image I have added a drop shadow I still would like help on figuring out how to mimic the upwards scrolling action of the example provided below. I would like the title to scroll up and the bottom to reveal new text
  18. Hello! I'm having an issue with my faq accordion page on my site. On initial page load, the accordion menu is open and then it closes. I just learned that 7.1 doesn't have the ajax loading options. I was wondering if there was a way to prevent the accordion menu from being open on page loads so the content is hidden? I would like for it to be closed until you click on the questions. site url: https://www.uniquelydolledwigs.com/ password: unique1234 @tuanphan
  19. Site URL: https://tulip-ranunculus-xc8d.squarespace.com/build-your-trip Hello, I have coded accordions for my website and they seem to work for some people and not others. I've been able to recreate the issue where the accordions don't open on google chrome and mobile view via google chrome. I'm not seeing any particular errors in the console that is pointing to this issue. Could anyone see if they are able to recreate this issue in chrome or if they are able to help? https://tulip-ranunculus-xc8d.squarespace.com/build-your-trip Password: "SuperTrip"
  20. Site URL: https://4clab.org/#about-4cl Hi @tuanphan, I've used your "Read More" html/css code found here to create a pair of text accordions on an "About" page in a Brine index comprised of alternating pages of text and full-height photo banners. It works perfectly on the page itself, however the photo banners in the index are not adapting when the accordions are open, creating a reduction in their height equal to the space taken up by the expanded text. Is there any way to remedy this? Thanks.
  21. Site URL: https://hibiscus-amphibian-tl3g.squarespace.com/config/commerce Can anyone tell me how to add a read less link under the expanded text? The code I used is as follows: <!-- Dropdown Accordion Code --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> Info is under additional information on the product tab. ### **+ Read More** Info
  22. Hi I need help fitting my tabs within the space of other info on page. Right now it's overflowing on the right side and when viewed on smaller screen you need to scroll to see all tabs. Code currently using: .tabs-container{ transform:translateY(100%); width:150% !important; text-align:center; border-bottom: 1px solid #999; overflow: auto; overflow-x:auto; white-space: nowrap; z-index:99; }
  23. Hello, I'm trying to add an accordion/dropdown to a website (it's still in trial at the moment so can't share web link). It is going to be used on a page showing the team of a company, so within each entry it also needs to include a picture of them. I have used the standard markdown used for an accordion, which by itself (without an image in it) works fine. I have then used an HTML image reference within it, and when it does this, only the first name appears. And when it is opened/clicked, the next name then appears below it (and so forth). But then when you close the top name, they all disappear (apart from the top one). I have also tried created an animated collapsible using HTML, CSS and Java (https://www.w3schools.com/howto/howto_js_collapsible.asp). This code was copied exactly, using a code block for the HTML, adding the CSS into the custom CSS, and adding the Javascript into the page specific code injection. The list options are created, but don't actually open when clicked on. If anyone can provide any insight into how to get either of these solutions to work that would be greatly appreciated. Screenshots are attached for reference. To confirm, I'm using the Henson template. Many thanks, James
  24. Site URL: https://ievaviphoto.com/ Hello, people! Would anyone give me a hand implementing this code onto my site? Would love to know the logic behind this! Thanks loads!! https://codepen.io/arjancodes/pen/gbweYB My site www.ievaviphoto.com
  25. Specifically, I'm using Aviator and on my services page I have a lot of entries that are service name with explanations underneath. I'd like the explanations to be hidden initially so visitors only see the list of services. Then they would have the option to expand the explanations under the services they want to read more about. For example Service Name (visitor would click name to open text underneath)[explanatory text here would remain hidden until user clicks service name, then expand to be read] Is there any way to do this?
  • Create New...