Hiding and Showing Widgets Tutorial

In this tutorial, you'll learn how to dynamically show and hide widgets in the web browser.

Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

  1. Open a new RP file and double-click Page 1 in the Pages pane to open it on the canvas.

  2. Drag a placeholder widget and three button widgets onto the canvas from the Libraries pane.

  3. Change the text on the buttons to Show, Hide, and Toggle.

  1. Hide the placeholder by selecting it and clicking the Hidden icon in the style toolbar or the Style pane.

2. Setting the Placeholder's Visibility When the Buttons Are Clicked

The Show Button

  1. Select the Show button and click Click or Tap → Set Visibility in the Interactions pane.

  2. Select the placeholder widget in the dropdown that appears.

  3. Leave Show selected and click OK to save the action.

The Hide Button

  1. Repeat the steps above with the Hide button, but select Hide instead of Show.

The Toggle Button

  1. Repeat the steps above with the Toggle button, but select Toggle instead of Show.

3. Preview the Interaction

  1. Preview the page and click the Show button to show the hidden placeholder.

  2. Click the Hide button to hide the placeholder again.

  3. Click the Toggle button a few times to alternately show and hide the placeholder.

Additional Information and Tips

Animations

You can use a number of animations when showing and hiding widgets, including fading, sliding, and flipping. These are available in the Animate dropdown in the Show/Hide action. Select the type of animation in the dropdown and set the duration of the animation (in milliseconds) in the field next to it.

Bring to Front

When showing a widget with either the Show or Toggle options, you can check the Bring to Front checkbox under More Options to have the widget automatically brought to the front of the design. This will ensure that no widgets overlap it when it is shown.

Lightboxes

When showing a widget with the Show option, you can choose to have it appear as a lightbox. This option is available in the dropdown under More Options at the bottom of the Show/Hide action.

Lightboxed widgets appear with a colored mask behind them that covers the rest of the design. Clicking anywhere on this mask will hide the widget again. You can change the mask's color and opacity with the Background Color color picker that appears when the Treat as Lightbox option is selected.

Flyout Menus

When showing a widget with the Show option, you can choose to have it treated as a flyout. A flyout widget is visible as long as the cursor remains on top of it or the widget that showed it. As soon as the cursor leaves the area of the widgets, the flyout widget is automatically hidden again.

For example, you might see flyout behavior when viewing the submenu items of a navigation menu or when viewing a tooltip for a page element.

This option is available in the dropdown under More Options at the bottom of the Show/Hide action.

Push/Pull Widgets

When showing a widget, you can choose to have other widgets on the page "pushed" down or to the right to make room for the shown widget. When hiding a widget, you can choose to have other widgets on the page "pulled" up or to the left to fill in the blank space left by the hidden widget.

These options are available in the dropdown under More Options at the bottom of the Show/Hide action.

← Interactive ButtonPass Text to Next Page →