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.
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:
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:
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:
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!
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.