# How to use show component and hide component in interactions?

> Use Show and Hide interactions to control the visibility of components during prototyping. Ideal for elements like sidebars,...

Source: https://mockflow.com/docs/wireframepro/prototyping/to-use-show-component-and-hide-component

Use Show and Hide interactions to control the visibility of components during prototyping. Ideal for elements like sidebars, modals, or dropdowns that appear based on user actions. Follow the steps below to implement Show and Hide interactions. 

1. To use the Show or Hide Component feature, select a component from the wireframe and click 'Manage Interactions.'

![Screen Shot 2024-09-12 at 3.41.02 PM.png](https://assets.mockflow.com/docs/media/0aa464a42081cf72dfcdf336.webp)

1. Choose an interaction, then select the 'Hide Component' action.

![Screen Shot 2024-09-12 at 3.39.46 PM.png](https://assets.mockflow.com/docs/media/7e0f61edde967f43ebe84959.gif)

1. From the components list, select the component to be hidden and click 'Select.'

![Screen Shot 2024-09-12 at 3.40.14 PM.png](https://assets.mockflow.com/docs/media/365f326169b5655defa55e4a.webp)

1. Next, select the component to show, and choose the preferred interaction.

![Screen Shot 2024-09-12 at 3.59.30 PM.png](https://assets.mockflow.com/docs/media/1fdab534846e1d7bd38a8302.webp)

1. And select the ' Show Component' action.

![S&H - Interaction (2).gif](https://assets.mockflow.com/docs/media/bbfe3ce3ad25bb9f099115f8.gif)

1. From the list, select the component to be shown, click 'Select,' and then click the eye icon to hide the component.

![Screen Shot 2024-09-12 at 3.41.32 PM.png](https://assets.mockflow.com/docs/media/37952f73384ea7e9266b653b.webp)

1. Add effects to the actions as needed. Refer to these articles for guidance on [adding and editing effect transitions.](https://support.mockflow.com/article/how-to-add-effects-to-interactions)

1. Switch to View Mode by clicking on 'View' to see the Show and Hide actions in effect by clicking on the desired component.

![Screenshot 2025-08-06 at 1.01.51 PM.png](https://assets.mockflow.com/docs/media/af4cdeeaf108c159d251c668.webp)

1. You'll notice that the actions are triggered each time the selected component is clicked.

![S&H - Interaction (3).gif](https://assets.mockflow.com/docs/media/eb00d19aa555abdbced1e75a.gif)

Refer to this detailed prototyping tutorial on Show and Hide interactions in Wireframes.

[Video](https://www.youtube.com/embed/IF_IuRYBcFE)