tuanphan

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 */ } #14.2. Add Image to Accordion Content (Use JS code)
Suppose you want to add this image 
https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg First, you edit Accordion >> Put your cursor at position where you want to add image >> Then enter text: image01

Next, add this code to Website Tools (under Not Linked) > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p:contains("image 01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); }); </script> <style> .image-01 { font-size: 0; } </style> Result

If adding 3 images, doing this



and use this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // image 01 $('div.accordion-item__description p:contains("image01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); // image 02 $('div.accordion-item__description p:contains("image02")').closest('p').addClass('image-02'); $('<img src="https://cdn.pixabay.com/photo/2023/11/07/10/06/girl-8371776_1280.png"/>').appendTo('.image-02'); // image 03 $('div.accordion-item__description p:contains("image03")').closest('p').addClass('image-03'); $('<img src="https://cdn.pixabay.com/photo/2023/10/02/14/51/flowers-8289320_1280.png"/>').appendTo('.image-03'); }); </script> <style> [class*="image-0"] { font-size: 0; } </style> #14.3. Add Image to Accordion Content
You can also use this approach
Enter Image Url 

highlight the text url > Add same image url (enable Open in New Window)

then use this code to Code Injection or Page Header Code Injection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p a:contains(".jpg")').each(function() { var $t = $(this); $(this).contents().filter(function(){ return this.nodeType != 1; }).remove(); $t.attr({ src: $t.attr('href') }) .removeAttr('href target'); $(this).replaceWith(function(){ return this.outerHTML.replace("<a", "<img").replace("</a", "</img") }); }); }); </script> <style> div.accordion-item__description img { width: 100%; margin-top: 10px; } </style>  
#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

If this, I don't know a way to achieve this. You try creating new thread, maybe someone can see and help

I didn't even realize. Another quick and successful code, thanks again hero!

Yes. But you can use this shorter code
/* this code will apply all items */ a.grid-item .grid-image-inner-wrapper { background-size: cover; background-repeat: no-repeat; background-position: center center; } a.grid-item:hover img { opacity: 0; } /* you can edit below code */ a.grid-item[href="/films/director-reel-2024"] .grid-image-inner-wrapper { background-image: url(https://static1.squarespace.com/static/64382eed1c35456fd1ce5b34/t/65b926225b27dc7fe8b06d07/1706632744209/Director_Reel_01.gif); } a.grid-item[href="/films/director-reel-2024"]:hover img { opacity: 0; }  

You can use this code to Website > Website Tools > Custom CSS then save & reload the page
@media screen and (max-width:767px) { [data-section-id="65e9490abe62d95cb37c9634"] .gallery-grid-wrapper { grid-template-columns: repeat(2,1fr) !important; } }  

You can use this CSS code
nav.header-nav-list { flex-wrap: nowrap; } .header-title-nav-wrapper { margin: 0 !important; } .header-display-desktop { justify-content: center !important; flex-direction: column; }  

You can use this code to Website > Website Tools > Custom CSS
/* remove portfolio pagination */ .item-pagination[data-collection-type^="portfolio"] { display: none; }  

Hi,
Video Block or Video Background? If Video Background, there is a plugin with these features.

Use this new code
.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { text-align:left; left: 0; min-width:200px; margin-left: 0; padding-left: 0 !important; }  

Your site is private, we can't access it, you can access this guide to know how to share url
 

Try this new code
/* Change logo on scroll */ .shrink .header-title-logo img { visibility: hidden; transition: all 0.3s; } .shrink .header-title-logo a { background-image: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoths-4811285__340.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; transition: all 0.3s; }  

Add to Design > Custom CSS
/* Change logo on scroll */ .shrink .header-title-logo img { visibility: hidden; } .shrink .header-title-logo a { background-image: url(https://cdn.pixabay.com/photo/2020/02/01/20/05/hummingbird-hawkmoths-4811285__340.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; }  

If you still can't fix this, you can use this code to Website > Website Tools > Custom CSS
@media screen and (max-width:1024px) and (min-width:768px) { .fe-block-yui_3_17_2_1_1712597396422_47239 { grid-column-start: 17 !important; grid-column-end: 20 !important; } }  

You can use this code to Website > Website Tools > Custom CSS
.fe-660ffbe3ed41b10c86c50fad { --row-height-scaling-factor: 0 !important; }  

Use this CSS code
@media screen and (min-width: 768px) { [data-section-id="65e07302487e8725e7601b17"] button.user-items-list-carousel__arrow-button { opacity: 1 !important; transform: unset !important; } [data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--left:before { content: "( PREV )"; font-size: 13px; } [data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--right:before { content: "( NEXT )"; font-size: 13px; } [data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--left:after, [data-section-id="65e07302487e8725e7601b17"] .user-items-list-carousel__arrow-button--right:after { display: none; }}  

Add to Design > Custom CSS
@media screen and (max-width:767px) { div.header-announcement-bar-wrapper { padding-top: 5px !important; padding-bottom: 5px !important; }}  

Maybe this is your button size. Have you got the buttons set to Fit or Fill in their settings?

You can try the following code
@media only screen and (max-width: 1024px) { #collection-60d9e67efc07d56954523f28.header--menu-open .header-menu-nav-item:nth-child(5), #collection-60d9e67efc07d56954523f28.header--menu-open .header-menu-nav-item:nth-child(6) { display: none; } } Let me know how it works on your site

Here is what I did Tuanphan and something I am noticing with Squarespace.  Sections can get corrupt.  I ended up deleting the section completely, then creating a new section, adding the video back to the new section and I have no problems whatsoever now.  

Hi @mike.bj & @CarolStatella, I encountered this issue a while back and wasn't willing to lose sitewide animations to fix it. I found that adding the following media query (for each element with a hover state) was a better (albeit time consuming) solution. I've tested it on iPhone and it solves the issue. It may not be the perfect fix but hope it helps! 
@media only screen and (min-width: 768px) { .sqs-button-element--secondary:hover { /* styles here */ } }  

I just solved for a member. We tried script code to add id to section.
Here is code for reference
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function() { // about $('[data-section-id="6347865dc6e0f3031847aaa3"]').attr('id','about'); // collections $('[data-section-id="6347a295963cec6e06646a21"]').attr('id','collections'); // faq $('[data-section-id="63576f792a2a3d7110ae0494"]').attr('id','faq'); // contact $('[data-section-id="6347865dc6e0f3031847aaa9"]').attr('id','contact'); }); </script>  

I still check this. It will take some time to convert to Code Block

Cart Page ID List
Shopping Cart Title: h2.cart-title
Product Thumbnail
.cart-row-img OR .cart-row-img-wrapper Product Name: a.cart-row-title
Variant: p.cart-row-variant
If you have 2 variants, it will be
p.cart-row-variant:nth-child(1) p.cart-row-variant:nth-child(2)
Quantity: input.cart-row-qty-input
Minus: button.cart-row-qty-desc Plus: button.cart-row-qty-inc
Price: p.cart-row-price
Remove Icon: button.cart-row-remove

Subtotal text
p.cart-subtotal-label OR p.cart-subtotal-label span Subtotal price: p.cart-subtotal-price
Checkout button: button.cart-checkout-button
Text "You have nothing in your shopping cart."
p.empty-message Continue Shopping Button: a.cart-continue-button

Whole Cart Page: body#cart
Cart Page Header: body#cart header#header
Cart Page Logo: body#cart header#header img
Cart Page Menu Items
Desktop: body#cart div.header-nav-item>a Mobile: body#cart div.header-menu-nav-item a Cart Page Header Button: body#cart header#header a.btn
Cart Page Burger Icon
Burger Icon: body#cart:not(.header--menu-open) div.burger-inner>div X close icon: body#cart.header--menu-open div.burger-inner>div Cart Page Footer: body#cart footer.sections
If you have any problems, you can comment below.
 

Don't remove any code in your current code. Use this CSS code to change button text on hover
a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary:hover { color: #495A58 !important; }  

For Gallery Section Slideshow: Full, the arrow selector is slightly different
<script> // Wait for the DOM content to be fully loaded window.onload = function() { if (window.self !== window.top) { return; } // Function to simulate clicking the next arrow function clickNext(arrow) { arrow.click(); } var fullscreenSlideshows = document.querySelectorAll('.gallery-fullscreen-slideshow'); // Set auto-scrolling for each carousel fullscreenSlideshows.forEach(function(slideshow) { var intervalId; // Variable to hold the interval ID // Query all elements with the class for carousel next arrows const arrows = slideshow.querySelectorAll('.gallery-fullscreen-slideshow-control-btn'); arrows.forEach(function(arrow) { // Define a function to handle auto-scrolling for a specific carousel function autoScroll() { clickNext(arrow); } // Start the auto-scrolling for the current carousel if (arrow.getAttribute("aria-label") === "Next Slide") { // console.log('auto click next arrow'); intervalId = setInterval(autoScroll, 5000); } // Stop autoplay when the arrow is clicked arrow.addEventListener("click", function(e) { // Stop autoplay when it is user-triggered event if (e.offsetX || e.offsetY) { // console.log('user click') clearInterval(intervalId); } }); }); }); }; </script> cc @Laticauda