How to disappear/appear content in html?-CodePudding

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

CodePudding user response：

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

document.querySelector("#element-id").classList.toggle("d-none");

CodePudding user response：

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>

CodePudding user response：

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