[Share] Accordion Block: Useful code

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

Edited December 4, 2023 by tuanphan
update more code

Impressed! Thanks for the effort tuan

This is so helpful, than you @tuanphan

Do you know if there is a way to centre everything? Eg Headline, arrow, and content underneath, so I could centre this under the button...

9 minutes ago, ClaireWard said:

This is so helpful, than you @tuanphan

Do you know if there is a way to centre everything? Eg Headline, arrow, and content underneath, so I could centre this under the button...

Try edit Accordion Block > Design > Title > Alignment: Choose Center

If it doesn't work, you can share link to page in screenshot, we can check easier

 

11 Oct. Updated #10. Accordion Size on Mobile

On 11/7/2021 at 11:47 PM, tuanphan said:

/* 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);
}

Hi @tuanphan, I tried this here: https://devmatcon2.squarespace.com/?password=sneakpeek but I am not getting the PNG's I uploaded. 

 

Very impressive list my friend!

Edited November 10, 2021 by RolandFuseHub

38 minutes ago, RolandFuseHub said:

Hi @tuanphan, I tried this here: https://devmatcon2.squarespace.com/?password=sneakpeek but I am not getting the PNG's I uploaded. 

 

Very impressive list my friend!

I see the code worked, however the icon is very small. You can zoom browser to see it, or increase width & height in the code

In screenshot I increased to width: 100px, height: 100px;

#11. Updated new code

5 minutes ago, tuanphan said:

I see the code worked, however the icon is very small. You can zoom browser to see it, or increase width & height in the code

In screenshot I increased to width: 100px, height: 100px;

Icons I have used are 400px so ... ;o)

8 minutes ago, RolandFuseHub said:

Icons I have used are 400px so ... ;o)

but in this case the icon size will be decided by the icon container

Quote

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;
}

 

This is very useful. Thank you. I don't see a way to style links. I need to link to documents in my drop downs and there is currently no way to differential which text has a link. Any ideas?

 

On 11/12/2021 at 1:57 AM, majorscreative said:

This is very useful. Thank you. I don't see a way to style links. I need to link to documents in my drop downs and there is currently no way to differential which text has a link. Any ideas?

 

Thank for suggestion.

Added

• Accordion Content Link Style (add underline, change font style)
• Add a button/image into Accordion Content

Thank you!

Is there a way to show the text inside the accordion in two columns? 

Hmm... think I figured it out BUT now I have another question:

/* accordion with columns inside*/
.accordion-item__description  {
   columns: 2;
 column-gap: 30px;

    }

@media screen and (max-width:640px) {
.accordion-item__description  {
  columns: 1;
}
}

How can I now make the accordion title sticky so that people can close it easily if they don't feel like looking at the contents?

 

Edited November 16, 2021 by NIkiL

7 hours ago, NIkiL said:

Hmm... think I figured it out BUT now I have another question:

/* accordion with columns inside*/
.accordion-item__description  {
   columns: 2;
 column-gap: 30px;

    }

@media screen and (max-width:640px) {
.accordion-item__description  {
  columns: 1;
}
}

How can I now make the accordion title sticky so that people can close it easily if they don't feel like looking at the contents?

 

#1. You can also use this shorter code

@media screen and (min-width:768px) {
.accordion-item__description  {
   columns: 2;
 column-gap: 30px;
    }
}

#2. You can consider limit height of accordion content, then add scroll bar on right with CSS. This will be easier

17 hours ago, tuanphan said:

#2. You can consider limit height of accordion content, then add scroll bar on right with CSS. This will be easier

OK! What CSS would I use for this, please? Thank you for all your help!

Another way to think about it: how to keep the sticky accordion title STAYING sticky even after it is closed?

(I can imagine this would be complicated if there is more than one accordion in a page. I only have one accordion section in my page, though.)

 

Edited November 17, 2021 by NIkiL

10 hours ago, NIkiL said:

OK! What CSS would I use for this, please? Thank you for all your help!

Another way to think about it: how to keep the sticky accordion title STAYING sticky even after it is closed?

(I can imagine this would be complicated if there is more than one accordion in a page. I only have one accordion section in my page, though.)

 

Can you share link to page where you use accordion?

Thanks @tuanphan! 😃

Awesome. Thank you! 🙂

On 11/17/2021 at 5:24 PM, tuanphan said:

Can you share link to page where you use accordion?

@tuanphan

Hi! I am hoping to find a code to help me with the new accordion feature. The accordion is popping up underneath my photo, to the left of my product description on desktop, and I would like the order to be 1.product title, 2.price, 3.description, 4.accordion, 5.add to cart button. 

 

On mobile view the order is 1.product title, 2.price, 3.add to cart button, 4.description, 5.accordion

 

Let me know if you can help me! I'm desperate lol. I've attached screenshots! Thank you!

3 hours ago, feelingantisocial said:

@tuanphan

Hi! I am hoping to find a code to help me with the new accordion feature. The accordion is popping up underneath my photo, to the left of my product description on desktop, and I would like the order to be 1.product title, 2.price, 3.description, 4.accordion, 5.add to cart button. 

 

On mobile view the order is 1.product title, 2.price, 3.add to cart button, 4.description, 5.accordion

 

Let me know if you can help me! I'm desperate lol. I've attached screenshots! Thank you!

Can you share link to product? We can check easier

Thanks so much for this @tuanphan! You are a superstar! 

@tuanphan thanks for sharing this--most helpful. In the works to recreate an old accordion on a website using the new accordion block but cannot figure out how to replace the +/- with a graphic or a simple css-styled arrow like this: 

border: 8px solid transparent;
border-top: 8px solid #8eaf7d;
border-bottom: 0 none;

(closed and open versions of course)

Any clues to how this may be attempted?

Edited December 13, 2021 by Gazza
added clarification

On 12/14/2021 at 4:26 AM, Gazza said:

@tuanphan thanks for sharing this--most helpful. In the works to recreate an old accordion on a website using the new accordion block but cannot figure out how to replace the +/- with a graphic or a simple css-styled arrow like this: 

border: 8px solid transparent;
border-top: 8px solid #8eaf7d;
border-bottom: 0 none;

(closed and open versions of course)

Any clues to how this may be attempted?

Use this CSS

/* 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;
}

 

Awesome thread, thanks a lot!

I have a question about anchor links. I was wondering if it was possible to target a specific accordion item with an anchor link AND automatically open the accordion itself.

For the moment I simply managed to target the accordion title, but not to open the accordion itself.