How to toggle show or hide div/element on click of button using JavaScript & CSS | Beginners guide

In this video tutorial, I am going to show you how to toggle between hiding and showing an HTML element using just JavaScript and CSS on click a button. You can use OnClick event on the button to trigger a function that will show or hide the div or show or hide the element when button is clicked.
Timestamps:
0:00 Intro
2:16 Show div on click of button
5:40 Hide div on click of button

[@Sky-om8lv]

Cara você acabou de salvar meu TCC, muito obrigada!!

[@MC-ch7gj]

omg your explanation is way better than my teacher's!! you should teach at my school!! Most of there classes are online anyhow!

[@apradaglez]

It’s just I’ve looking for, thanks

[@ChadCredeur]

Exactly what I needed, thanks so much!

[@nepdev]

Welcome🙂

[@brunogrudzien9982]

U ARE AMAZING MAN THANKS

[@nepdev]

Thank You for your inspirational comment.

[@arminhodzic9382]

Thank you. Which parametres would be necessary to change when applying this to multiple individual tables?

[@nepdev]

Hi, Thank You for the comment. I have made a video on this. Please visit my channel to watch it.

[@nepdev]

You can visit this link as well: th-cam.com/video/B-xFM63wzg4/w-d-xo.html

[@user-vy7it5bi4t]

It still won’t let me open the container any advice?

[@sheezanawaz476]

Sir I have multiple element and i want to apply eventlistener on these element but when i click single element/button all elements are toggle . but i want show element on individually click on button

[@nepdev]

Hi, Thank You for the comment. I have made a video on this. Please visit my channel to watch it.

[@nepdev]

You can visit this link as well: th-cam.com/video/B-xFM63wzg4/w-d-xo.html

[@salsaalya3958]

plase how to revealed before click on button

[@manjuraj3948]

Correctly explained, and working, thank you. But when the project starts the message is on display and when button is clicked it hides. How can I keep the message hidden when the project starts ?

[@nepdev]

I am glad you found the video useful. Please add "display:none" in the CSS for the message. This will keep it hidden when the project starts.

[@snehasarkar5284]

How can i make it smoothly?

[@raunakstha7241]

use the animation from css