Hide/Show Part of a Page in JS

Question

Hello. I have an image on my website. I would like when I click it, it show a <div>, and when I click it another time, it hides the <div>. How can I do this in JavaScript? Should I use jQuery?

Answer 1

Have a look at

• jQuery API .toggle()
• jQuery API .hide()
• jQuery API .show()

Answer 2

You can do like this in JQuery:

<img id="img_id" src="image path here" />
<div id="mydiv" style="display:none;">Some content</div>

$('#img_id').toggle({ 
   function(){$('#mydiv').show();},
   function(){$('#mydiv').hide();}
});

First click on an element with id img_id will show an element with id mydiv and second click would hide it.

See more info about toggle() function.