Add a custom PNG icon to replace the + in your accordion block

Easily swap the default plus icon in your Squarespace accordion block with a custom PNG and add a smooth 90-degree rotation effect when it’s opened. Follow these simple steps!

• Accordion Item 1

  Description text goes here

---

Step 1: Add the JavaScript

1. Log in to your Squarespace account.

2. Navigate to Settings > Advanced > Code Injection.

3. Scroll to the Footer section.

4. Paste the following JavaScript code into the footer code box and save your changes.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const accordionItems = document.querySelectorAll('.accordion-item'); // Change the selector to match your accordion's container

    accordionItems.forEach(item => {
      item.addEventListener('click', function() {
        // Toggle the active state on the accordion item
        this.classList.toggle('open');
      });
    });
  });
</script>

---

Step 2: Add Custom CSS

1. Navigate to Design > Custom CSS.

2. Paste the following CSS code into the Custom CSS editor:

3. Save your changes.

//Add your own accordion plus icon that rotates on open//

.plus {
  background-image: url("YOUR-PNG-URL");
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 23px !important; /* Adjust size */
  height: 23px !important; /* Adjust size */
  text-indent: -9999px;
  overflow: hidden;
  transition: transform 0.3s ease; /* Smooth transition for rotation */
}

/* This targets the plus icon when the accordion item is open */
.accordion-item.open .plus {
  transform: rotate(90deg); /* Rotates the icon 90 degrees */
}

---

Step 3: Edit Accordion Block Icon colour

1. Navigate to Site Styles

2. Choose Colours

3. Choose the Section colour theme that your blog post pages is using

4. Scroll down to Accordion block colour settings and make sure the opacity of the Accordion Block Icon colour is set to 0%. This will ensure the default icon is hidden

---

Customisable code

• Icon Size: Adjust the width and height in the CSS to resize the icon.

• Icon Rotation Degree: Change the rotation angle (e.g., 90deg) in the CSS to modify how much the icon rotates.

• Accordion Selector: Modify the JavaScript selector (.accordion-item) to match your specific accordion item class.

• Transition Speed: Change the duration in the transition property to make the icon rotate faster or slower.