Using the Show and Hide Actions
Learn how to show and hide widgets interactively using Actions
Jamie Gutierrez avatar
Written by Jamie Gutierrez
Updated over a week ago

You can change the visibility of a widget using the Show/Hide action.  Below you'll find a video showing a few examples being built, and you'll also find detailed text instructions as well. 


These actions allow you to prototype behaviors such as hover effects, drop-down menus, showing error messages or displaying an advanced search dialog when the user clicks on an “advanced search” button.

To add a show or hide interaction to a widget in Editor

  1. Select the widget that will be the source for the interaction, e.g. the “advanced search” text widget.

  2. Open the actions panel.

  3. Click the “Add Action” button.

  4. Select the desired trigger, for example “on click” and the desired action, e.g. “show widgets”. Note that you can also hide or toggle the visibility.  Click Next.

  5. Click on the “Select widgets” button, which will put the cursor in a “targeting” mode that allows you to pick which widgets you want to show.

  6. Select target widgets by clicking widgets on the screen or by clicking on widgets in the Outline panel.  The action dialog is draggable if it gets in your way.

  7. Optionally add an effect or delay and click "Done”.

Actions can be sequenced.  If you need to Switch Views after you show or hide some widgets, just add another Action.  You can also reorder actions by dragging them up and down the Actions panel.

Did this answer your question?