Flip Accordion Arrow when Open

I’m trying to have the arrow on an accordion appear upside down when the accordion is open. See below:

Screenshot 2022-11-23 at 10.18.51 AM

Here is the content link: Builder.io: Drag and drop Visual CMS

Hi @mrnda_darkroom,

You can add a CSS class to the arrow image to rotate it

var element = document.querySelector(".arrow");
  transform: rotate(180deg);

hi @manish-sharma,

How do I have it only appear upside down when the accordion is open, vs appearing right side up when the accordion is closed?

Additionally, this code rotates it around the top of the element, I’m trying to rotate it around it’s center so that it stays in the same position.

Hi @mrnda_darkroom,

You can create a content state isActive in builder and then try the below code

const arrow = document.querySelector('.accordion-arrow');
  arrow.style.transform = 'rotate(0deg)';
  state.isActive = false;
  arrow.style.transform = 'rotate(-90deg)';
  state.isActive = true;