Show One, Hide Others on Mouse Click

Using JavaScript with Hype
1

I’ve been all through the site and can’t seem to find an answer to what seems like an easy question:

I have an illustration with several areas where visitors can click that call up different boxes of text.

My issue is getting that box of text to then disappear when a separate area is clicked, to avoid having all the text boxes start to overlap.

I don’t see any way to select using a class selector to just have all boxes disappear (as a reset) when a new area is clicked.

Any ideas?

2
  1. Assign class names to the elements in the Identity Inspector, for example I am using myClassName
  2. Use this code to hide all elements with that class
    var elements = document.getElementsByClassName("myClassName");
for(var i = 0; i < elements.length; i++) {
    elements[i].style.display = "none"; 
}
  3. You’ll need some code that will specifically show the box in question (in this example, it simply has an ID of myElementId but there may be other ways you want to figure this out):
    var elementToShow = hypeDocument.getElementById("myElementId");
elementToShow.style.display = "block";

Note that since this is in the JavaScript category of the forums this is the coding answer, but depending on your needs you might instead want to use Relative Keyframes. You’d basically make one timeline that is a “reset” and changes things back and then can run another timeline that shows/animates what you want.

1 Like