On click visibility 0 or display hidden for multiple elements


I am trying to make a simple game for iBooks Author. There will be several bubbles on the screen. When clicked I want to play a sound and have the bubble disappear. I have the sound working. But what is the best way to make the bubble disappear. Do I make a timeline for each bubble and use Start Timeline. Thanks for the help.

(René) #2

You can use a script for all bubbles with a setElement:

hypeDocument.setElementProperty(element, 'opacity', 0, optionalDuration, optionalTimingFunctionName)

(Mark Hunte) #3

Remember using opacity will leave the element in play just not visible to the eye but still clickable

you may want to use visibility :

element.style.visibility = "hidden";


I’ve tried this but it doesn’t work. I don’t know much about JS yet. What am I doing wrong.

document.getElementById("bubble").style.visibility = "hidden";

Thanks again

(Mark Hunte) #5

That initially looks ok. To see whats really going on we would need to see the project


Here it is and thanks for taking a look.

HypePOP.zip (1.4 MB)


Hi @dCipollo

I suspect you haven’t given your “bubble” the ID. Check in the Identity pane in the inspector to see if a) you have the ID “bubble” and b) it is spelled correctly

Also, as Mark suggested you can use the element argument which means that whatever element you click it will change it’s visibility. That way you can use the same function for multiple elements without the need to point to them using "getElementByID())