We've expanded visibility actions with the options to set a forced value for "show" and "hide" (as opposed to the default "toggle"). Adding these options was necessary to enable more complex logic, such as tab menu's.

Showing and hiding elements through "toggle"

The old situation lets you impact the visibility of elements (e.g. showing and hiding) with a toggle. What that means is, that the toggled element would always take on the opposite value of the current "state". In simple words:

• If the element is showing, it will be hidden on click or hover
• If the element is hidden, it will be shown on click or hover

However, there was no way to "force" the desired value behind an action. The interacted element always takes the opposite value of its current state. This works for simple designs, but you may have ran into problems when designing more complex components, such as tab menus.The tab menu dilemma Let's say our tab menu has three tabs. There are some rules by which we want the menu to abide, such as:

• The first tab should be open by default
• Only one tab can be open at a time
• One tab should be open at all times
• The tab should not close when no other panels are open.

Under the hood, that's quite a lot of rules. The current "toggle" option poses problems adhering to all requirements. For example, take the embedded example below and try:

• clicking the first tab header while it is already open (spoiler: it will close)
• clicking the second or third tab, the contents of two tabs will be showing

Forcing "show" and "hide" values for better user experience

With the current update, we can force the value to always be "show" upon clicking. That way, if the tab is already open, it will remain open when clicked. Additionally, we can force other groups to always hide when a tab is clicked.

This enables you to build more complex logic into your designs. An example could be a reset button that resets multiple elements to their original state. If you'd like for an element to always take the opposite value, simply opt for the "toggle" option again. Check out the demo page!

Showing and hiding multiple elements on one interaction

It's possible to force multiple values upon one click or hover. However, within the platform you would need each rule to have its own configured action. That means that you could show and hide multiple elements on the page with just one click or hover action, but it will look like a list of actions in the editor's UI. In reality, all the actions are happening at the same time. That is why we can create two actions for a tab: one that opens the tab's contents and one that hides all other content.