Remove Automatic Dividers on All Accordions [CSS Solution]
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 👇
Want a framework for designing the perfect homepage?
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.
Once you’re happy, hit save and you’ll have removed the automatic dividers from accordion blocks on Squarespace.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
