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
LenP got a reaction from creedon in Display border around code block in edit mode only
