How to use Toggle Component visibility?

If you want to create a toggle effect when a user clicks on a menu item, a list of options appears. Clicking the same menu item again hides the list, allowing users to easily expand or collapse options. Follow the steps below to use the Toggle Component Visibility interaction.


1To use Toggle Component Visibility, select a component and click 'Manage Interactions.'


Screen Shot 2024-09-12 at 12.59.57 PM.png


2Choose the preferred interaction from the list and select 'Toggle Component Visibility.'


Screen Shot 2024-09-12 at 1.00.37 PM.png


3Specify the component affected by the action by either visually selecting it or choosing it from the displayed components list. Once selected, click 'Select.'


Screen Shot 2024-09-12 at 1.00.55 PM.png


4Now, add the effect to the selected action. Refer to this article for instructions on adding effects and editing transitions.


Screen Shot 2024-09-12 at 1.01.52 PM.png


5In the sidebar, click on Layers to hide the component where the action will be applied.


Screen Shot 2024-09-12 at 2.32.30 PM.png


6Once everything is set up, switch to View Mode to see the interaction in action. Clicking the component will reveal the dropdown list, and clicking it again will hide it, allowing easy expansion or collapse.







Rate this article
great ok bad
For more questions - Contact Us
...