Flip Accordion Arrow when Open

Visual Editor Help
1

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

2

Hi @mrnda_darkroom,

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

var element = document.querySelector(".arrow");
element.classList.add("rotate-arrow");

.rotate-arrow{
  transform: rotate(180deg);
}
3

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.

4

Hi @mrnda_darkroom,

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

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