How to create a numbered accordion block

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"}
 
insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

https://insidethesquare.co
Previous
Previous

Add a background image to a gallery section

Next
Next

How to fix Squarespace blog pagination on mobile