18 Quick Tweaks for Your Squarespace Accordion

Tired of a wall of text on your website?

Then it's time to add a Squarespace accordion.

Here are 18 hand-picked Squarespace accordion plugins and css codes to improve your website:

1. Add an animated shadow style

Give your Squarespace accordions a shadow style with a subtle three-dimensional effect. This effect has a smooth, visually appealing transition between the open and closed states.

2. Add custom Squarespace accordion icons

This css code from Beaver Hero lets you change the plus and minus to custom icon to the Squarespace accordion. Just replace demo image urls with your icon urls and you’re ready to go.

/* Plus */
:not([data-is-open="true"]) .plus {
    background-image: url(https://cdn.pixabay.com/photo/2021/02/06/09/03/man-5987447__340.jpg) !important;
    background-size: contain;
    background-repeat: no-repeat;
}
:not([data-is-open="true"]) .plus div {
    display: none;
}
/* Minus */
[data-is-open="true"] .plus {
    background-image: url(https://cdn.pixabay.com/photo/2021/12/12/22/17/red-squirrel-6867105__480.jpg) !important;
    background-size: contain;
    background-repeat: no-repeat;
}
[data-is-open="true"] .plus div {
    display: none;
}

3. Hide the accordion on mobile

Sometimes you want to show some extra content on the big screens while staying minimal on the mobile site. This Squarespace accordion plugin hide the accordion block on the mobile version of your site.

4. Change the dividing line

You can alter the line between each element in your accordion to fit your website's style, or you can remove it altogether. You can do this by going to the design tab and clicking on dividers.

5. Give it a solid look

This solid accordion style enhances the design by giving a bold, uniform look to the accordion, making it stand out on the webpage.

6. Add a button inside the Squarespace accordion

This handy css snippet will turn any link placed inside the accordion into a button.

div.accordion-item__description p a {
    background-color: black;
    color: white !important;
    padding: 10px 15px;
}

7. Add a highlight on hover

This nifty Squarespace accordion CSS tutorial from Will Myers highlights a particular line of the accordion when you hover over it to provide an eye-catching effect.

8. Change the color of the icon

The icon is the plus sign or arrow on each line of the Squarespace accordion that encourages users to click and expand. You can change this by adding the following code to your custom CSS; just change the hex code to the color you want to use.

.accordion-block .arrow, .accordion-block .plus {
    border-color: #ee5532 !important;
}

9. Expand the first item

If you want the first row of your accordion to be expanded by default, go to design and toggle the expand first item button.

10. Squarespace accordion with images

Add an image to the accordion with this handy CSS snippet. Click here for instructions.

11. Border Squarespace accordion plugin

This accordion border feature can improve the user experience by making it easier to navigate and find the desired information in your accordion.

12. Have multiple lines expand at a time

You can only have one line expand at a time by default, but you can change this. Go to the design tab and toggle the allow multiple open items button.

13. Change the dividing line color

The default option only lets you change the opacity of the divider, but this simple css code lets you change it to anything you want. Just change the hex code to your liking.

.accordion-divider {
    color: #cccccc !important;
}

14. Change the alignment

The text in your accordion will justify to the left by default, but you can change the alignment as required. Go to the design tab, click on title or description and choose the alignment you want to use.

15. Change the Squarespace accordion corners to curved

If you want to tweak the your corners from straight to curved, this css code will transform your accordion! Scroll to number two in the list to find out more.

16. Change the order of your items

Changing the order of your items is easy. Go to the content tab, click on the two lines at the far left of each item, and drag them into the order you want.

17. Change the row padding

You can add more or less space between rows, so your accordion is styled in line with the rest of the text on your website. Go to the design tab, and under row padding, choose how much padding you want.

18. Add a colored background to the Squarespace accordion

If you want to make your accordion more vivid, adding a colored background or gradient can really make it pop! Here’s the CSS code snippets you need to use; just change the hex code to the color you want.

How to add a Squarespace accordion

Option 1: Use the built in Squarespace accordion block

Since Squarespace added support for accordion blocks, adding accordions to your site is now super easy!

To add a Squarespace accordion, do this:

1. Open your site in edit-mode.

2. Add new block, and select “Accordion”.

3. Done!

Option 2: Build your own Squarespace accordion

Building your own Squarespace accordion can be done in three simple steps. You only have to do steps 1 and 2 once, and you can add as many accordions as you want after that.

1. Add the javascript

To start, open your site in Squarespace. Then go to Website > Website Tools (scroll down) > Code Injection, and paste in the code below:

<script>
//ACCORDION
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
   this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
      panel.style.paddingBottom = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      panel.style.paddingBottom = "2rem";
    }
  });
}
</script>

2. Add the CSS

Go to Website > Website Tools (scroll down) > Custom CSS, and paste in the code below:

/* ACCORDION */
.accordion {
  cursor: pointer;
  padding: 1.5rem 2rem;
  text-align: left;
  border: none;
  outline: none;
  transition: 200ms ease-in-out;
  display: flex;
  align-items: center;
  position: relative;
}
.accordion:hover {
  background-color: #f6f6f9;
}
.accordion:active {
  background-color: #f0f0f3;
}
.light .accordion:hover {
  background-color: rgba(180,180,200,.12);
}
.light .accordion:active {
  background-color: rgba(180,180,200,.2);
}
.accordion::after {
  content: "+";
  position: absolute;
  right: 2.5rem;
}
.active::after {
  content: "-";
}
.panel {
  padding-left: 2rem;
  padding-right: 2rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  
  &:not(:last-of-type) {
    border-bottom: solid 1px rgba(180,180,210,.18);
  }
  p {
    transition-property: none;
  }
}
@media screen and (max-width: 800px) {
  .accordion {
    padding: 1.5rem 1rem !important;
  }
  .accordion::after {
    right: 1rem !important;
  }
}

3. Add the accordion in Squarespace

Click "edit" and add a code block anywhere you want on the page. Paste one of the examples below, and replace it with your own content. The accordion is now added!

Accordion with one line: 

<div class="accordion">First accordion</div>
<div class="panel"><p>Add text here</p></div>

Accordion with multiple lines:

<div class="accordion">First accordion</div>
<div class="panel"><p>Add text here</p></div>
<div class="accordion">Second accordion</div>
<div class="panel"><p>Add text here</p></div>
<div class="accordion">Third accordion</div>
<div class="panel"><p>Add text here</p></div>

Good to know about accordions in Squarespace

What is an accordion in Squarespace?

A Squarespace accordion allows your website visitor to selectively hide and display information on your website by using clickable toggle buttons.

It is one way you can expose content to users progressively, by highlighting important details of a section and revealing more details upon a tap or click if wanted.

When should you add an accordion to Squarespace?

Accordions can be used for a variety of things. FAQs are a popular way of using it. Or imagine you write a lot of content that covers a single topic. There might be 15 steps involved, and each of these can be hidden with a single accordion (by only showing the headings).

Accordions work well for responsive design. It fits on one small screen whereas other methods like tabs may need a horizontal scroll (user will be needed to see hidden tabs themselves).

Difference between FAQ, dropdown and accordion

Dropdown

A Squarespace dropdown used to open one section, with more narrow content.

Accordion

A Squarespace accordion is used to open multiple sections, with content that’s often 100% wide.

FAQ

A Squarespace FAQ dropdown shows frequently asked questions on a website.

Which Squarespace accordion style will you use?

That is how to add an accordion in Squarespace for free. I hope you found the guide helpful, and an accordion design that you will use.

If you did, be sure to check out my Squarespace plugin Spark Plugin. Spark Plugin features 100+ stunning designs, and makes any website look great in just a few clicks. You can take a look at all the designs here.