How to make something disappear at the touch of a button? | Sololearn: Learn to code for FREE!

+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.

4/22/2019 8:53:55 PM

Grasshopper Hell Monkey

10 Answers

New Answer

+2

Decimis † π•―π–Šπ–ˆπ–Žπ–’π–Žπ–˜ In your code is enough: "function touch(){ var blueCircle = document.getElementById('circle'); blueCircle.style.visibility="hidden"; }"

+5

https://code.sololearn.com/W0HG1jLM7HHz/?ref=app

+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.

+4

Oh, thanks both of you.

+2

Thanks, but couldn't i reach the same result using the visibility property?

+2

CalviΥ² Yes, an option without a script - 5 points.πŸ‘

+1

Show your code

+1

https://code.sololearn.com/WJuRbd5T7Ibi/?ref=app

+1

If you want a simpler example: https://code.sololearn.com/WMLL851hrYSG/?ref=app

+1

Grasshopper Hell Monkey Sure you can. There I switched it to use visibility="hidden"; instead of opacity="0";