Rotate custom accordion icon 90 deg when expanded

Ionic Framework
1

Hi, I’m using a custom icon within my accordion by adding the class ion-accordion-toggle-icon to an IonIcon within a IonItem, within an IonAccordion. The new icon is showing up as expected, but when it is expanded I need it to rotate 90 deg instead of 190 deg. It doesn’t look like there’s an attribute for controlling this, but I figured I could do it with CSS since there is an accordion-expanded class that gets applied to the accordion component. No matter what I try I’m not able to get a selector to apply styles to the icon within though.

I’ve tried straight CSS like this:
.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon

And I’ve tried using the shadow part for the accordion like this:
ion-accordion::part(header expanded) .ion-accordion-toggle-icon

Neither of those worked. Anyone have a suggestion on how to make this work?
Also, is it just not possible to access elements through an ionic shadow part, like i’m trying to do here?

Here is the React code I’m using for the accordion:

<IonAccordion color={color} toggleIconSlot={toggleIconSlot} value={accordionValue}>
        <IonItem color={color} data-test="accordion-item" lines="none" slot="header">
          {header}
          <IonIcon
            className="ion-accordion-toggle-icon"
            color={color}
            icon={IconList.chevronRight as IconName}
            slot={toggleIconSlot}
          />
        </IonItem>
        {content}
      </IonAccordion>

Thanks!

2

This seems to work (testing in Vue). Copied from the applied styles in DevTools:

ion-accordion.accordion-expanded > [slot=header] .ion-accordion-toggle-icon {
  transform: rotate(90deg);
}

Prefixed with ion-accordion increased the specificity.

3

Sorry for the delay here, I finally got back to looking at this, but unfortunately the method you suggested here doesn’t work for me. The ion-accordion.accordion-expanded selector doesn’t even register on the element. Still stumped here if anyone has suggestions.

4

Maybe you have something else going on. It is working just fine in this StackBlitz. I know nothing about React so I just added the CSS to the variables.css file :grin:

image

5

Ah! Thanks for passing this along. The issue was that I was adding the override styles in my css-modules file and the hashing prevented the styles from getting applied to the ionic components that live outside the component they are used in. Poking at your example helped me grok that though, so thank you again!

Also, as a side-note to anyone else reading this answer, I was able to prevent the rotate animation from doing the full 180, then back to 90 degrees by adding the “.accordion-expanding” selector to that block:

ion-accordion.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon,
ion-accordion.accordion-expanding > [slot="header"] .ion-accordion-toggle-icon {
  transform: rotate(90deg);
}
1 Like