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.

5 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.

3 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

3 Likes
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”.

2 Likes
11

Any news on this WIP… ?

12

It’s about 2 years now!
I had the same issue and I was searching the forum only to find several threads on this topic.

@thomas @timmse

13

This would be a great addition!

+1

14

Perhaps this can be considered for 2.0? Pretty please? :stuck_out_tongue:

15

Still, the issue is there. The reason is that, I can’t use rotation bcus I use two different icons for each collapse & expand.

I don’t know how the brx-open class would help my situation.

1 Like
16

It seems nobody cares about this request from a bunch of long-waiting guys.

1 Like