Changing the accordion block icon when a dropdown is open (7.0, 7.1 CE & 7.1 FE)

• 00
• 01
• 02
• 99

In a previous video, we tackled how to swap the native icons from Squarespace’s accordion block for our own custom ones.

But this time, we’re taking things to the next level.

Inspired by a question I received a couple of weeks ago, today we’re going to be looking into how we can actually use a DIFFERENT icon for the accordion items, depending on whether the dropdown is OPEN or CLOSED.

This little CSS trick can help you add that extra attention to detail that your client will absolutely love, while taking only 5 mins of your time to make it happen (~10 if you’re watching the video).

So, without further ado, let’s get to it!

Tutorial

Overview & timestamps

Let’s break down what we’re going to be doing to achieve this customization:

1. 00:00 - Intro

2. 01:24 - A brief look into the example setup
   We’ll begin by taking a quick look at what I’ll be working with for the sake of the example. Keep in mind that I’ll be using code adapted for the chevron arrow. If you’re using the plus sign instead, you’ll need to modify the CSS slightly.

3. 02:02 - Breaking down the customization
   Now, before jumping into the Inspect Element tool we’ll take a few seconds to think about what it is that we’ll be doing first and what we should look for inside the HTML to help us achieve that.

4. 02:35 - Looking for our target container
   Next, it’s time to pick our target container based on the different options we have available AND considering what would make our live’s easier.

5. 04:07 - Targeting the icon container
   With everything else in place, we’ll move onto building our selector by grabbing the classes needed to target our element and make sure we’re only doing so for the Accordion Block.

6. 05:44 - Adding the background image
   Once everything’s sorted out, we can bring in our custom icon to set is as the background of the container we chose.

7. 06:01 - Resizing and centering icon
   We’ll need to make a few tweaks here and there to make sure everything looks good and not cropped, but it’ll only take a few seconds.

8. 06:54 - Getting rid of the original icon
   Time to get rid of the original icon! We’ll target a different container this time in order to hide only the chevron arrow and NOT our new custom icon.

9. 07:50 - Changing the icon when the dropdown is open
   Last but not least, it’s time to set up the swap! We’ll be taking a closer look inside the Inspector tool to see HOW we can tell the browser that we only want to change the icon when the dropdown is open. Get ready to be shocked at how easy it is!
   

And that’s it!

The most time-consuming part of this one – as it often happens with CSS tricks – is deciding WHAT to target and HOW.

But you now know EXACTLY what to do to make this icon swap happen for your client projects in a very short amount of time.

Hope you enjoyed this one!

Until next time,

B.

---

Full code

/*CHANGING THE ACCORDION BLOCK ICON WHEN A DROPDOWN IS OPEN (7.0, 7.1 CE & 7.1 FE)*/
.accordion-block .arrow-container {
  background-image: url(https://static1.squarespace.com/static/62742667747f3f25cdbe3eab/t/63517361ab35e34947cf41d1/1666282337221/9025814_leaf_icon+%281%29+green.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.accordion-block .arrow {
  display: none;
}
.accordion-item[data-is-open="true"] .arrow-container {
  background-image: url(https://static1.squarespace.com/static/62742667747f3f25cdbe3eab/t/6351736da035302a3f866ec1/1666282349588/9025814_leaf_icon+%281%29.png);
}