WIP: Accordion (nestable) icon on expanded

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

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

I am waiting also for that.

Thanks.

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;
}

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

Any news here for a native support? :slight_smile:

1 Like

@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

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}

1 Like

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:

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

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

Any news on this WIP… ?

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