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.

4 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:

1 Like
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

7

easy way !!

add 2 icons and add class: icon-1 , icon-2

add custom style to Accordion (Nestable)

%root% .icon-2 {display:none}
%root% .brx-open .icon-2 {display:inline-block}
%root% .brx-open .icon-1 {display:none}

2023-12-16_13-05-27
2023-12-16_13-05-27935Ă—669 60.7 KB

1 Like
8

I’m surprised to find that this isn’t a native feature in the element already, so I’m hoping his gets added soon. This has my vote. :slight_smile:

9

FYI, there is a Bricks Labs article that can help with this too: Bricks Accordion (Nestable) Element's Icons - BricksLabs

10

Yea - i dunno why this small thing is hardcoded… I’ve used the transform approach on a bunch of sites, but it’s not the best since the brxe-open state is added when the item is opened fully so any transistion to the icon is done with a 200ms delay and gives the impression of a “lag”.

1 Like
11

Any news on this WIP… ?