WIP: Accordion (nestable) icon on expanded

Bugs
4

Thanks to Maxime Beguins’ start I set this up as follows.

  1. Add a custom classname to the accordion (in my example: ms-faq)

And use this CSS:

.ms-faq .brx-open .brxe-icon {
transform: rotate(90deg);
}

.ms-faq .brxe-icon {
transition: 200ms transform ease-in-out;
}

image
image580Ă—780 23.2 KB

Note: Used a class for specificity rule since I don’t know if these classes are used elsewhere.
Credits to Maxime.

edit
Limitation: This rotates the original icon. If you want to swap it for a different one, that won’t work with this code.

Pro:
You can add colors / backgrounds etc. with this as well,

.ms-faq .brx-open .brxe-icon {
transform: rotate(90deg);
color: red;
background: yellow; etc.
}

.ms-faq .brxe-icon {
transition: 200ms transform ease-in-out;
}

Etc.

3 Likes