0

I want to appear/disappear a <div> in a html file from a javascript function. How can I do that?

Vidu
  • 33
  • 1
  • 7
  • You can change its `display` style from `block` to `none`. Either by assigning the `style` property or by changing a class that has these styles. – Barmar Dec 13 '21 at 18:07
  • 2
    Does this answer your question? [Show/hide 'div' using JavaScript](https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript) – aerial Dec 14 '21 at 16:19

4 Answers4

2

Here's a real simple way.

function togglehide(id){

    var el = document.getElementById(id);
  el.classList.toggle('hideme');
  
}
.hideme{display:none}
<button onclick="togglehide('mydiv')">Click me</button>
<br>
<div id="mydiv">
put some content here
</div>
Phaelax z
  • 1,814
  • 1
  • 7
  • 19
1

Select it, then set either its style, or add a CSS class that does the hiding.

document.querySelector("#element-id").classList.toggle("d-none");
Quasipickle
  • 4,383
  • 1
  • 31
  • 53
0
let div = document.querySelector('div');
div.style.display = 'none'; // this will make it as if it didn't exist
div.style.opacity = 0 // this will make it transparent
Ahmed Haffez
  • 24
  • 4
0

Set the style property to none which hides the content.

document.getElementById("element").style.display = "none";
lakshna S
  • 255
  • 1
  • 5