WIP: Accordion (nestable) icon on expanded

Bugs
1

Bricks Version: 1.5

In the non-nestable accordion you can choose an icon for expanded element (arrow down)

in the new nestable you can only have one icon.

3 Likes
2

Hello @creatiwdk

Thank you for your post.

We are aware of this limitation. We are still testing what would be the best approach to provide a configurable expanded icon in the Accordion nestable element.

Stay tuned!
Luis

5 Likes
3

I am waiting also for that.

Thanks.

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.

2 Likes
5

Any news here for a native support? :slight_smile:

6

@timmse sent me a template how you can achieve to have a closing icon! if someone is still interested, here you go: Dropbox - template-accordion-nestable-icons-2023-08-07.json - Simplify your life