2nd icon for nestable accordion

Feature Requests / Improvements
1

For the nestable accordion, I noticed that there is no option to choose another icon for the accordion when it’s opened.

Use case:
I usually use an arrow for the accordion. It shows the default direction when the accordion is closed, and the icon indicates the same icon but a different direction(like up and down) when it is opened.

My workaround for this is to do it with custom CSS to change the direction of the icon with the transform property when the nestable accordion is opened.

However, having the option for the 2nd icon(or having the option to change the direction of the icon in the nestable according’s setting) is easier for regular users who can’t code.

8 Likes
2

do you have the CSS for your solution?

1 Like
3

Yes. I wrote the custom CSS to rotate the icon for the time being until they implemented this setting. I can share the workaround with you if you need it.

1 Like
4

Yes would be awesome because currently I need exactly this. :smile:

5

Just add this code to your nestable accordion.

.brx-open > .accordion-title-wrapper i {transform:rotate(90deg);}

My custom CSS code is to replace those class names with mine only.
It should work.

Hope it helps.

4 Likes
6

Thank you very much. That works perfectly. :heart_eyes:

1 Like
7

Glad I could help. :wink:

1 Like
8

Is there also an option to change the icon? Unfotunately I didn’t manage to get the right CSS… :sweat_smile:

9

@phillencolin
Hi! Sorry for the late reply!

In the nestable accordion, the icon is changeable to whatever icon you like. Just find the icon in the structure panel.

10

Hi Jornes! Sorry, I think I wasnt very precise with my question… What I wanted to know is what would be the code to change the icon when the accordeon is open?

1 Like
11

There is no direct option to add a second icon for the accordion’s open mode. Maybe we need a workaround to achieve that. That’s why I submitted this feature request.

12

@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

1 Like
13

Thanks for sharing this! I’ll check it out shortly. :v:

14

Thanks Jornes, that worked!
I am using the Arrow up and down, so for all of you guys who need a 180 rotation and smoother transition, add this to the Icon CSS:

.brx-open > .accordion-title-wrapper i {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.accordion-title-wrapper i {
    transition: transform 0.3s ease;
}```
15

Hey @Monika You’re welcome! Glad it helped.