Accordion Component - Change Expend Icon Color or Flip the Custom One

Plasmic Studio Questions
1

Hi there,

I created a custom navbar using the Plasmic Accordion component but not sure how can I change the expand icon color from black so something else(the default one is not visible because the nav is also black). Also tried adding a custom icon and flipping it around but if I use the down arrow(ex: V) it will flip it to the left(ex: <). And I want it upwards(ex: Λ). Any ideas?

Thanks!

2

You can create a custom component from the Plasmic Collapse component.
Then create a variant called Active. Set a dynamic value of $state.isOpen to trigger it.
On the base variant, add a custom icon to Slot: expand icon
On the Active variant, give the custom expand icon a transition: rotate 180 degrees.

Now, when you toggle the Collapse, you should see the behaviour you are looking for for the navbar.

Here’s a quick video:

3

Can’t the same behaviour be achieved with a Accordion component? I need many Items/childs so a simple colapse won’t do it.

4

I think it can probably be done with an accordion too, but its just easier with a Collapse component. You can use a Collapse component for each item/child.