+ 1

How to make something disappear at the touch of a button?

I'm trying to make a program where a button is pressed and a css figure disappears revealing something that was behind it, like a big box that disappears and you see it's content (eg: a circle), i was trying to do it with the css property visible turning it to hidden. I'd rather an actual example of a working program, i tried many things, but in the end i somehow lost progress, couldn't even make a simple change of text color, probably something in the syntax i got wrong and didn't found out what. If you could also exemplify how to access different css properties through JS (two words like background-color in JS are backgroundColor i guess, but I'd like confirmation on that too, I'm really confused to how it works). Thanks if you can possibly help with any of these two problems.

22nd Apr 2019, 8:53 PM
Grasshopper Hell Monkey
Grasshopper Hell Monkey - avatar
10 Réponses
+ 2
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 In your code is enough: "function touch(){ var blueCircle = document.getElementById('circle'); blueCircle.style.visibility="hidden"; }"
22nd Apr 2019, 10:28 PM
Solo
Solo - avatar
23rd Apr 2019, 1:21 AM
Calviղ
Calviղ - avatar
+ 5
Grasshopper Hell Monkey Only this css code performs the reveal action: #wrap:target .box { background-color: rgba(255,0,0,0); } This css makes the upper red square box which its background color is background-color: rgba(255,0,0,0); turns to transparent upon targeted by the button.
23rd Apr 2019, 1:49 AM
Calviղ
Calviղ - avatar
+ 4
Oh, thanks both of you.
22nd Apr 2019, 10:58 PM
Grasshopper Hell Monkey
Grasshopper Hell Monkey - avatar
+ 2
Thanks, but couldn't i reach the same result using the visibility property?
22nd Apr 2019, 10:09 PM
Grasshopper Hell Monkey
Grasshopper Hell Monkey - avatar
+ 2
Calviղ Yes, an option without a script - 5 points.👍
23rd Apr 2019, 1:48 AM
Solo
Solo - avatar
+ 1
Show your code
22nd Apr 2019, 9:38 PM
Solo
Solo - avatar
+ 1
22nd Apr 2019, 10:07 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar
+ 1
Grasshopper Hell Monkey Sure you can. There I switched it to use visibility="hidden"; instead of opacity="0";
22nd Apr 2019, 10:13 PM
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘
Decimis † 𝕯𝖊𝖈𝖎𝖒𝖎𝖘 - avatar