Make All Accordion Divider Lines the Same Height

Squarespace’s new Accordion Blocks have been a godsend. But the dividers are a different story! They seem to change heights depending on what screen size you’re on, and they can look very uneven. The only real solution I’ve been able to find is to disable the dividers in the accordion settings and then adding borders manually using code. This method makes sure that all the dividers are even height!

First, disable the dividers on the accordion block. Then, put this code into Design -> Custom CSS:

/* Add a divider ONLY on the bottom of all accordion items */

.accordion-item {
  border-bottom: 4px solid #000000;
}

/* Add a divider to the top AND bottom of all accordion items */

.accordion-item:first-child {
  border-top: 4px solid #000000;
}
.accordion-item {
  border-bottom: 4px solid #000000;
}

Customize

• To change color, replace #000000 with the color of your choice

• To change the thickness of the divider, change 4px to the height of your choice