# Flip Accordion Arrow when Open

**URL:** <https://forum.builder.io/t/flip-accordion-arrow-when-open/2918>\
**Category:** Visual Editor Help\
**Created:** [November 23, 2022, 6:21pm UTC](https://forum.builder.io/t/flip-accordion-arrow-when-open/2918 "2022-11-23T18:21:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrnda\_darkroom](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@mrnda\_darkroom](https://forum.builder.io/u/mrnda_darkroom)\
**Post date:** [November 23, 2022, 6:21pm UTC](https://forum.builder.io/t/flip-accordion-arrow-when-open/2918/1 "2022-11-23T18:21:29Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/21870edcb02bb55dcb80c7d34992aa0ea22a0fd2.png)

Here is the content link: [Builder.io: Drag and drop Visual CMS](https://builder.io/content/0c3f9ed8408943d0896cb21056def2f2/edit?activeDesignerTab=3&selectedBlock=builder-9ef0929260ec40e69459bbc7fce2de73)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [November 23, 2022, 7:20pm UTC](https://forum.builder.io/t/flip-accordion-arrow-when-open/2918/2 "2022-11-23T19:20:54Z")

</div>

Hi @mrnda_darkroom,

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

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

```

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

```

---

<div class="post-metadata">

**Author:** ![mrnda\_darkroom](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@mrnda\_darkroom](https://forum.builder.io/u/mrnda_darkroom)\
**Post date:** [November 23, 2022, 8:50pm UTC](https://forum.builder.io/t/flip-accordion-arrow-when-open/2918/3 "2022-11-23T20:50:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [November 24, 2022, 5:35pm UTC](https://forum.builder.io/t/flip-accordion-arrow-when-open/2918/4 "2022-11-24T17:35:50Z")

</div>

Hi @mrnda_darkroom,

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

```auto
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;
}

```