How to make a div appear and disapper with 2 clicks on js | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 3

How to make a div appear and disapper with 2 clicks on js

Guys, please I need help with using a click to make a div appear and disappear by tapping a button twice. Like first time, it appears, second it disappears. Have done the appearing, now the second click

16th Jun 2019, 10:59 AM
xpan
xpan - avatar
12 Answers
+ 2
By the way, wouldn't it be easier to just switch based on its state? con.style.display = con.style.display == "none"? "block": "none";
16th Jun 2019, 2:42 PM
Airree
Airree - avatar
+ 3
You can make any DOM element disappear by setting its visibility property to "hidden" (default: "visible"). Then you can make a function that switches between these two states
16th Jun 2019, 11:24 AM
Airree
Airree - avatar
+ 3
Thank you but I know that already
16th Jun 2019, 12:04 PM
xpan
xpan - avatar
+ 3
see this function cont(){ var count=0; count++; if (count=1){ var con=document.getElementById("con"); con.style.display="block"; } else if (count=2){ var con=document.getElementById(""); con.style.display="none"; count=0; } }
16th Jun 2019, 12:04 PM
xpan
xpan - avatar
+ 3
the problem is that everytime the function runs, you automatically reset count's value; you should define count outside of the function. Also, you didn't get the id of anything in the second function
16th Jun 2019, 12:08 PM
Airree
Airree - avatar
+ 3
Have done that, still not working
16th Jun 2019, 2:38 PM
xpan
xpan - avatar
+ 3
var count=0; function cont(){ count++; var con=document.getElementById("con"); if (count=1){ con.style.display="block"; } else{ con.style.display="none"; count=0; } }
16th Jun 2019, 2:40 PM
xpan
xpan - avatar
+ 3
Please explain
16th Jun 2019, 2:52 PM
xpan
xpan - avatar
+ 3
ooh,let me try it
16th Jun 2019, 2:57 PM
xpan
xpan - avatar
+ 3
Ooh, thanks a lot Airree. I've gotten it. The final code, from your help: function cont(){ var con=document.getElementById("con"); if (con.style.display=="none"){ con.style.display="block"; } else{ con.style.display="none"; } }
16th Jun 2019, 3:02 PM
xpan
xpan - avatar
+ 2
It checks if the display of con is none, if it is, it sets it to block, otherwise sets it to none
16th Jun 2019, 2:53 PM
Airree
Airree - avatar
+ 1
Can you, like let me see your code?
16th Jun 2019, 2:38 PM
Airree
Airree - avatar