Closing current popup with javascript

[jasper]

Hello,

I recently rediscovered TH again and I am looking for help on the following.
I made an infographic for a client with clickable items (buttons) that, when clicked, trigger a custom behaviour to make a popup (tooltip-esque) appear. Works awesome!
What it basically does is trigger a timeline on the first click and continues it (and closing the popup) on the second click.

But....
What I would like to achieve is when the first item (button) is clicked the first popup opens but if a next (random) item is clicked the first popup closes and the next one opens. So the second click on the same item to close the popup still functions, but when a random other item is clicked the popup that is currently open closes first.

My Javascript skills are very limited but I wonder if there is any function that can do this for me.
Due to the secrecy of the content of my client I unfortunately cannot share any specific project files here with you. If needed I can make a dummy file without the content and only the functions/behaviours in it.
I hope someone of you can help me solving this problem.
Kind Regards, Jasper

infographic dummy Hypeforum.hype.zip (37.0 KB)

[MarkHunte]

This is the way I would do it.
First I would use.

Introducing Hype Symbol Override Extension - Override Symbol Instance properties -v1.1.4

[ExtensionHeadImage1] Introducing Hype Symbol Override Extension Although Hype Symbol instances share all the same HTML properties, child elements , timelines etc of the Symbol. It is often the case that you want each Symbol's instance to use different parameters when they appear on scene. For example you may be using a Symbol to display images and text but want different Images , Text or Colours for each instance. Hype at present does not have this as a built feature. But this extension …

So that you can use one Symbol with instances of it.

I would then put the button in the symbol And have it continue a popup timeline.
The timeline would use a pause and got to time in timeline with reverse.
This creates a toggled button.

How to make a Single Toggle Button

I have noticed that many people struggle to work out how to make a toggle button that uses a single Timeline. Many get tripped up by putting a Pause timeline at the beginning of the timeline when wanting to use reverse timeline. The animations either don’t start, take two clicks to start or just repeat … Here is an Example of how to do it simply and with only one Timeline. Note I do not use start Timeline anywhere… especially in the Buttons Actions. This is another mistake that people fall …

At the begining of the timeline I would have the call to the JS.
The JS will look for all the symbole Instances with the name popup and reverse the popup timeline of each. We would need to check that we are not doing so for a running timeline..

The hype-symbol-override-extension. ( we put the cdn linked file in the Head)

Is used to set the Inner text of each button and info pop up.

---

---

We can also let the group that all the symbols are in call the same JS. This will allow the user to click on the scene area ( where the group is expanded to ) and close all open popups.

infographic dummy Hypeforum. mhv1.zip (27.6 KB)

[MaxZieb (Loves Hype)]

Here is the something similar in Hype Data Decorator (basic implementation, so no box resizing etc.)

PopupHypeDecoratorVerySimpleExample.hype.zip (21,7 KB)

[jasper]

@MarkHunte Thanks for your input! Much appreciated.
I quickly opened the file you attached and I think I can make it work for my own project.
I will have a fiddle and let you know if it worked. Thanks again!
/Jasper