23 Feb 2021

How to Hide and Show an Element on Click (Toggle)?


In this post I will show you that How to Hide and Show an HTML Element on Click Event? In other words, Hiding and Showing an html element or tag on clicks is called Toggle. Toggle is state that in which states of an element of display CSS property: display : none; to remove HTML element from View. display: block; to show an element.

HTML

<button id="btn">Click to Hide/Show</button>
< id="content">
Content
</div>


JavaScript

 btn.onclick = function (e){

if(content.style.display != "none"){

content.style.display = "none";

} else{

content.style.display ="block";

  } 

} 

  
Content

Hide & Show Element With jQuery $

jQuery $ has already defined method for Hiding & Showing Html Element.


Reaction:

No comments:

No Comments

COMMENT FROM MESSAGE