How to create a numbered accordion block in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About This Tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Squarespace's built-in accordion block is a great tool for displaying information in a clear and organized way.
But what if you want to add a touch of personality and style?
This free Squarespace tutorial dives into the world of custom CSS code to transform your basic accordion block into a numbered masterpiece with customized colors to truly reflect your brand.
Squarespace Tutorial
Code Example
Here are the codes from this tutorial. Be sure to customize the values to match the style of your unique website!
/* size & color */
.sqs-block-accordion .accordion-item__click-target{
background: #e5f5f6; /* accordion title background */
padding: 1rem!important;
padding-left:2rem!important;
margin-bottom:.5rem
}
.sqs-block-accordion .accordion-divider{
display:none
}
/* open item */
.accordion-item__dropdown--open {
margin-top:-.5rem;
padding:1rem;
padding-bottom:0;
margin-bottom:1rem;
background:#fff /* accordion description background*/
}
.sqs-block-accordion .accordion-item__click-target[aria-expanded="true"]{
background:#e5f5f6 /* accordion item title background when open */
}
/*large numbers */
.sqs-block-accordion .accordion-item__click-target:before{
font-size: 3rem;
transform:translatex(-1rem)
}
/* numbers: add more as needed */
.accordion-item:nth-child(1) .accordion-item__click-target:before{content:"01"}
.accordion-item:nth-child(2) .accordion-item__click-target:before{content:"02"}
.accordion-item:nth-child(3) .accordion-item__click-target:before{content:"03"}
.accordion-item:nth-child(4) .accordion-item__click-target:before{content:"04"}
.accordion-item:nth-child(5) .accordion-item__click-target:before{content:"05"}
.accordion-item:nth-child(6) .accordion-item__click-target:before{content:"06"}
.accordion-item:nth-child(7) .accordion-item__click-target:before{content:"07"}
.accordion-item:nth-child(8) .accordion-item__click-target:before{content:"08"}
.accordion-item:nth-child(9) .accordion-item__click-target:before{content:"09"}
.accordion-item:nth-child(10) .accordion-item__click-target:before{content:"10"}