Skip to main content
Question

How to do inverted boolean or automatically toggle 1 icon

  • January 28, 2025
  • 1 reply
  • 52 views

Oscar Godson

I couldn’t figure this out but I keep running into this and figured I’d ask.

Let’s say I have a component like an accordion with a title, description, and arrow icon.

Today, I can add a boolean property like “Is Open” that will show/hide the accordion content as well as text properties and then finally I know I can do an instance swap on the arrow for up and down.

However, I’d like the arrow icon to be automatic since you should never have a disconnected “open” state with an arrow indicating closed and vice versa.

Is there a way to say, for example, if boolean is FALSE I want true (i.e. in code !isOpen) to show/hide the right arrow? then I could have two layers of arrows (up and down) and then one is shown and other is hidden and vice versa when you toggle.

If not any other methods to do this or do I need an entirely new variation just to flip the arrow icon in my example? An entirely new variation for that seemed overkill.

1 reply

Pavel_Kiselev
  • Power Member
  • 438 replies
  • January 28, 2025

For Accordion and all sorts of expanders I’d use variants, I don’t believe there is a better way to make it work


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings