Show one element and hide everything else automatically

#1

Hi,

is there a possibility that when i show an element i hide all the other elements? For example I have a costum tooltip and on one page are 10 of these tooltips. Every time i click one i want all the others to hide.

Is this possible? Maybe with selection group or something?

Thanks already for helping.

#2

You can do this many ways. I’d say the two basic approaches are “brute force” and a selection group.

With brute force, your interaction code hides all the tooltips then shows only one specific tooltip. Each tooltip/widget will need to know about all other tooltips/widgets–and/or whatever buttons or other events you use to control your tooltips. So, if you add another one later, you’d need to update interaction code for all the tooltips.

With a selection group, only one tooltip can be selected at a time, so the code is usually more simple, as you only have to handle one tooltip at a time. If you add more tooltips you don’t have to change as much code. The trick is how to show a tooltip when it is selected and hide when unselected. In the demo file below, I show the brute force and two different selection group methods.

See this little demo (with ellipsis widgets instead of tooltips)
Show Only One.rp (73.5 KB)

  1. Brute Force
    a. You can click on a dot or use one of the control buttons to cycle through the 4 dots.
    b. The first action is always to hide all the dots, followed by showing only one dot.

  2. Selection Group with Show/Hide
    a. I assigned all the green dots to a selection group named “green dots”
    b. Each green dot has a Selected event with action of “Show This”
    c. …and Unselected with “Hide This”

  3. Selection Group with opacity change
    a. I assigned all the red dots to a selection group named “red dots”
    b. I set the default style of the red dots to 0% opacity, so they are not visible
    c. I set the selected style to 100% opacity
    d. There is less code than the other two methods
    e. Caveats are every dot is still clickable, even when invisible, and no show/hide animations
    f. (for fun I threw in a different way for each dot to trigger the next dot with a Fire Event call)