js show and hide elements 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: hide element js

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

Example 3: javascript hide show div

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("#1").hide();
    $("#2").show();
  });
  $("#show").click(function(){
    $("#1").show();
    $("#2").hide();
  });
});
</script>
</head>
<body>

<p id="1">Area 1</p>
<p id="2" style="display: none;">Second area</p>

<button id="show">Area 1</button>
<button id="hide">Second Area</button>

</body>
</html>

Example 4: js hide element

Check this! https://dev.to/devlorenzo/js-hide-and-show-32og

Tags:

Html Example

Recent Posts