How to create a numbered accordion block

content block

Aug 31

Squarespace's built-in accordion block is a great tool for displaying information in a clear & 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.

You’ll find the codes you need below, but there are many aspects that you’ll need to change to make this work for your own unique website. Please watch the tutorial video before adding these codes to your website to avoid any common code mistakes.

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

accordion