javascript show hide div by id code example

Example 1: javascript hide div

// javascript
<script>
	document.getElementById("id").style.display = "none";  //hide
	document.getElementById("id").style.display = "block"; //show
	document.getElementById("id").style.display = ""; 	   //show
</script>

// html
<html>
	<div id="id" style="display:none">
    <div id="id" style="display:block">
</html>

// jquery
<script>
	$("#id").hide();      
	$("#id").show();
</script>

Example 2: html button that hide and show

<button onclick="toggleText()">button</button>
<p id="Myid">Text</p>
<script>
function toggleText(){
  var x = document.getElementById("Myid");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

Example 3: js hide div

//If you have jquery, you can use the following method:
$("#mydiv").hide(); //hides div.
$("#mydiv").show(); //shows div.
//If you don't have jquery...
//search up the following: html how to add jquery

Example 4: javascript hide a div

<div id="main"> 
  <p> Hide/show this div </p>
</div>

('#main').hide(); //to hide

// 2nd way, by injecting css using jquery
$("#main").css("display", "none");

Tags:

Css Example

Related