show hide div on click javascript 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: click anywhere and div hide javascript
document.addEventListener('mouseup', function(e) {
let container = document.getElementById('container');
if (!container.contains(e.target)) {
container.style.display = 'none';
}
});
Example 3: 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 4: toggle element javascript
document.querySelector("#test").hidden = true;
document.querySelector("#test").hidden = false;