How to create accordion subtitles in Squarespace

content block

Jun 3

Accordion blocks are one of the most useful interactive elements in Squarespace, but what if you could make them even better? In this tutorial, I’ll show you how to add a second line of text directly under your accordion title using just a little custom CSS. It’s a great way to add extra context or flair to your content, and the best part? You can customize the style of that second line to match your brand perfectly.

In this tutorial, you’ll also learn how to target individual accordion blocks using their unique block IDs so that second line only appears where you want it. Whether you're creating team member bios, FAQs, or product details, this little code trick can give your layout a whole new level of polish and flexibility.

Watch the full video below to see exactly how it's done, and then explore the post below to grab the code, install the Chrome extension for finding block IDs, and download my free font & text property guide to help you style your accordion text like a pro.

Here’s the CSS code to add a second line of text beneath each accordion title. You can adjust the font size, color, spacing, and other parts of the text style to match your site’s design by customizing the first part of the code, or changing each item individually.

/* accordion subtitle from insidethesquare.co */
.accordion-item__title:after{
  white-space:pre;
  font-size:14px;
  font-weight:bold;
  letter-spacing:.2rem
}
.sqs-block-accordion .accordion-item:nth-child(1) 
.accordion-item__title:after{
  content: "\A FIRST ITEM";
  color: red!important
}
.sqs-block-accordion .accordion-item:nth-child(2) 
.accordion-item__title:after{
  content: "\A SECOND ITEM";
  color: blue!important
}
.sqs-block-accordion .accordion-item:nth-child(3) 
.accordion-item__title:after{
  content: "\A THIRD ITEM";
  color: green!important
}

Want to add a fourth or fifth accordion item? Just copy the last line of the code, update the number to match the new item, and change the text inside the quotation marks to whatever you’d like it to say, like these two examples below:

.sqs-block-accordion .accordion-item:nth-child(4) 
.accordion-item__title:after{
  content:"\A FOURTH ITEM";
  color: purple!important
}
.sqs-block-accordion .accordion-item:nth-child(5) 
.accordion-item__title:after{
  content:"\A FOURTH ITEM";
  color: orange!important
}

🔎 Free Squarespace ID Finder

If you’re using more than one accordion block on the same page, you’ll want to use this free Chrome extension to find each block’s unique ID. That way, your custom text only shows up in the accordion you choose.

👉 Get the Squarespace ID Finder Chrome Extension

🎨 Free Font & Text Property Guide

Need help customizing how your new subtitle looks? This free guide includes all of my go-to font and text properties for Squarespace, plus copy-and-paste code examples to help you style like a pro.

👉 Download the Free Font & Text Property Guide