When you add an accordion block on Squarespace, it will automatically add dividers. Now you can remove these dividers, however if you duplicate or save the block, the dividers will reappear. Annoying!

To ensure this doesn’t happen and to automatically remove dividers on all your accordions, you need to use a little bit of custom code.

Watch the video

Check out the YouTube video below 👇

Head to Website > Website Tools > Custom CSS and add the following lines of code:

.accordion-divider {
display: none;
}

You need to wrap this code in the name of the accordion dividers in the CSS, so hit Shift + Command + C to open Google Chrome Developer Tools and extract the CSS name of your accordion divider.

This code will tell Squarespace that you’re targeting all of the accordion dividers on your website and that you don’t want them displayed.

If you only wanted to remove the dividers for specific sections, you would need to wrap the code in the relevant section ID. Remember you’ll need to add the code for each section.

For example:

#SECTION-ID {
.accordion-divider {
display: none;
}
}

To find this section ID you’d need to use the Squarespace ID finder Google Chrome plugin.

📩 Join the inner circle to get exclusive code updates

Once you’re happy, hit save and you’ll have removed the automatic dividers from accordion blocks on Squarespace.

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?