How to create an alternating color accordion block in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

It can be hard to read a long list of items, but using alternating light colors as a background is a super simple way to break up content and make it more legible.

This tutorial will teach you how to change the background color of every other item in an accordion block.

Be sure to keep a high contrast between your text and the background color!

Learn more about creating colorful codes at insidethesquare.co/colors

Here is the code from this tutorial.

The first color is for the odd accordion items, starting with one. The second color will change the background of the even ones, starting with the second item.

.accordion-item:nth-child(odd){
background: #e5f5f6
}

.accordion-item:nth-child(even){
background: lightgray

}