Show and Hide Element On Click Using JavaScript - How To Code School

In this simple tutorial, I am going to show you how to hide and display an Image (you can hide and display anything else) with simple JavaScript.

OnClick event is used to trigger a function which displays and hides the element. You can replace image with Div or any other HTML Element.

Please visit our Website for more tutorials and articles.

Our HTML Tutorials/Articles:

OUR CSS Tutorials/Articles:

Our JavaScript Tutorials/Articles:

Our Other Tutorials:

Please Subscribe for more Cool Videos.

Track: Dirty Palm - No Stopping Love [NCS Release]
Music provided by NoCopyrightSounds.

[Alexander_Meyer]

Thanks man, helped me with a google apps script problem I had. If anyone else here is trying this with google apps, and want the image to be hidden by default, use the body to call the function one time before its needed.. For some reason

[jiroignacio]

Oh My!! Thank you for this!! Been searchin' for ages yet I saw this, hands down!! THANK YOU!

[daniyalkhalid]

best video to learn javascript onclick function

[apoorvasetu]

Thank you! was searching for a short onclick working video for hamburger menu and this worked.

[citylumberjack]

Not a big fan of the in-your-face dance music, however that being said you solved a coding issue for me and for that I am grateful! I was using a slightly altered version of the if-else argument with the "var" preceding the function as well as not using a boolean (I think it is boolean?) as you do. I'm better at PHP than JS (I know, weird huh?!) so my if-else usage with JS is a tad elementary.

Anyone having an issue with "on-click" events requiring 2 clicks for the initial page load and then functioning properly after that, is coding it so that the 1st click of the button/div/span etc.. activates the event handler while the 2nd click works because the event handler has been activated, and now the code will run.

THIS CODE SOLVES THAT ISSUE!

Bravo!

[diegohenao]

It worked perfectly for me! Thanks a lot!

[ktkkoko]

Very good Sir I really like your lessons.

[kitabrabta]

perfect tutorial on javascript onclick function

[chargtv]

Great musical taste and thank you very much for the code!

[nvrstp_bby]

You're the best!!!! Thank you so much.

[SujayKantiPaul]

Thank you very much. I'm success for your video. Many more good wishes for you. Thanks again.

[nonifh]

thank you so much for this, great tutorial! do you know how id be able to add a transition time into this? adding one to the css doesn't seem to be making a difference. thanks!

[RafaelHEscobar]

Hey! Thanks for this tutorial. It's very useful to me because I'm learning JS.
I'd like to ask: how does this apply to different elements? For example, four buttons anchored to their respective ids.

[anandhu_]

thanks for small duration tutorials...

[harshrajsinghchauhan]

Hi there, My question is there any way to have a look on .js file of a website because I cannot find js folder in Developer mode (maybe because it's hiidden), so is there other way?? reply soon. Thankyou.

[jiyudev]

Thank you so much brah u help me a lot

[theautumnleaf]

thank you it was useful, simple but useful :)

[Lucy-vbjg]

THANK YOU!! I searched for about 2 hours and finally found a working version!!

[gregtegreg]

Ah so this is great for responsive nav, show/hide hamburger menu, right?

[zanosajuela]

Hi can i add this on same js script many times for multiple onclick button ?

Or should i make another js file for this .?