NO BUG: Accordion (Nestable) missing icon controls

Bugs
1

I think this one qualifies as a bug because it’s odd that Accordion (Nestable) doesn’t have an expanded icon option.

So, when the accordion expands, the icon just the same pointing to the right, instead of down, indicating that the item is open.

Or am I missing something?

2

Hey @techtone,

thanks for your report.

I would not call this a bug as with the nestable elements you have full control over the whole content and can do whatever you like with it (including animating things). You can use the brx-open class to distinguish between opened and closed accordion items and use this for your animation.

So with the default setup the following custom CSS on your accordion element adds a basic rotation animation to the icon when the item is opened:

root .brxe-icon {
  transition: var(--bricks-transition);
}

root .brx-open .brxe-icon {
  rotate: 90deg;
}

Adjust this CSS to your needs.

And of course you’re always welcome to create an idea for these kinds of improvements.

Let me know if that helps.

Best,

André

2 Likes
3

Hi @aslotta, Thanks for the solution.

For example, if we want the icon to change after the accordion is opened, for example + to - is there a way to do that?

4

Hi Hosein,
You can add two icons (a “+” and a “-”) and show or hide it (display: block, display: none) based on the .brx-open class, which indicates if the accordion is open.

2 Likes
5

Hi timmse

Unfortunately I am not able to get to show another icon using the .brx-open class due to my limited CSS knowledge, can you post an example that I can use and adapt? My main issue is that I don’t know where to apply the display:block and none exactly…

Best

6

There you go @phillencolin: Dropbox - template-accordion-nestable-icons-2023-08-07.json - Simplify your life

1 Like
7

Halleluja! Thank you so much @timmse now I get it how its done :wink:

1 Like
9

this code not pasting on my canvas. It seems to be old.

10

Downloading and importing the template works fine :v: