Adrian Javier
 · Pun Enthusiast

Show Target & Hide Others Interactions

When creating an interactive experience, there will probably be times when you want to show just a bit of information at a time while hiding other related content. E.g. you have an image carousel or accordion, but only want one image or group of objects to show at a time.

While you can technically create this type of effect by setting up both a show action for the object and a hide action targeting everything else, there is a simpler, faster way to accomplish this. Enter Show Target(s) & Hide Others and the Hide Target(s) & Show Others interactions.

What exactly do these interactions do?

Show Target(s) & Hide Others enables you to create an interaction that, upon click, will only show an asset (image, video, group, or folder) that you designate, while simultaneously hiding everything else in that folder or group.

Hide Target(s) & Show Others enables you to do the opposite, creating an interaction that will hide the asset you target, while simultaneously showing everything else in that group.

How do I use these interactions?

To set one up:

  1. First, decide what assets you want to be showing and hiding. These could be any objects from images, to videos, to text boxes, icons, or even groups or folders of a combination of assets.

  2. Next, organize all of those assets into the same folder (or group) in your layers panel. For best practice, we recommend using a folder to house all of your assets.

  3. Now, choose the object or hotspot that you are making clickable, and navigate to the interactions tab in your Inspector Panel.

  4. Set up an On Click trigger and choose either “Show Target(s) & Hide Others” or “Hide Target(s) & Show Others” as the action.

  5. You can then select the target image (or other objects, group, folder, etc.) from the folder or group that you created in Step 2.

Now, when someone clicks on your trigger, the Studio will automatically show (or hide) the designated target and hide (or show) the rest of the assets in that folder. Repeat the above steps for the other hotspots in that section, changing the target as needed.

When should I use these?

These interactions can be great for creating popups and for creating image galleries or if you’re simply trying to show a block of information without any of the other blocks showing. If you ever want to have only one element showing at a time, this interaction is perfect for you. Take a look at the example below:

These interactions can be found in the On Click interactions under the heading Group-Based Visibility. To read about the other Group-Based Visibility interactions, check out this article on Cycle Interactions.

3
1 reply