Happy New Year

show-hide-div-using-javascript

JavaScript hide and show element

The visibility property allows the author to show or hide an element. I am sharing a simple code here that shows how easily you can show/hide a DIV element using JavaScript.

Javascript hide element by id

<div id="dv1"> hi am div 1</div>

$(function() {
   document.getElementById("dv1").style.visibility = "hidden";
});
or
function HideDiv(){
  document.getElementById("dv1").style.visibility = "hidden";
}

Javascript show element by id

<div id="dv1"> hi am div 1</div>

$(function() {
   document.getElementById("dv1").style.visibility = "visible";
});
or
function ShowDiv(){
  document.getElementById("dv1").style.visibility = "visible";
}

Javascript hide element by Class

<div class="maindiv"> hi am div 1</div>

$(function() {
   document.getElementsByClassName("maindiv").style.visibility = "hidden";
});
or
function HideDiv(){
  document.getElementsByClassName("maindiv").style.visibility = "hidden";
}

Javascript show element by Class

<div class="maindiv"> hi am div 1</div>

$(function() {
   document.getElementsByClassName("maindiv").style.visibility = "visible";
});
or
function ShowDiv(){
  document.getElementsByClassName("maindiv").style.visibility = "visible";
}

Javascript show element by tagname

<div> <h1> hi how are you </h1> </div>

$(function() {
   document.getElementsByTagName("h1").style.visibility = "visible";
});
or
function ShowDiv(){
  document.getElementsByTagName("h1").style.visibility = "visible";
}

Javascript hide element by tagname

<div> <h1> hi how are you </h1> </div>

$(function() {
   document.getElementsByTagName("h1").style.visibility = "hidden";
});
or
function ShowDiv(){
  document.getElementsByTagName("h1").style.visibility = "hidden";
}