How do I make a div get hidden?

Navigation
1

I have a function here that makes the div invisible and visible, but it starts visible, I would like it to start invisible.

    
asked by anonymous 02.02.2018 / 18:19

5 answers

3

function mostra_oculta(){

    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

}
<div id='myDIV' style='background-color: green;'><p>Aqui a div</p></div>

<button type='button' id='btnMO' onclick='mostra_oculta()'>Mostra/Oculta</button>

Without any secrets, just put this code in your div: 

display: none;

This is an example of your div: 

<div style='display: none;'><p>Div do gustavo aqui</p></div>
    
02.02.2018 / 18:40
3

Since you are manipulating the css property display to start with the 'invisible' element, simply add in the css properties of this element: 

display:none
    
02.02.2018 / 18:33
2

An option with CSS only to state if you do not want to use JavaScript 

div {
    display: none;
}
label {
    cursor: pointer;
}
input[type="checkbox"]:checked + div {
    display: block;
    height: 100px;
    width: 100px;
    background-color: red;
}
<label for="btn">Clique no Checkbox</label>
<input type="checkbox" id="btn">
<div></div>
    
02.02.2018 / 18:53
1

Follow this basic example: 

<div style="display:none">
    <label>Título</label>
    <input type="text" value="texto">
</div>
    
02.02.2018 / 18:42
1

An example of how to start an invisible element and toggle its property according to a function in javascript. 

function magica(){
  var $element = document.getElementById("luz");
  var $button = document.getElementById("switch");
  
  if ($element.hasAttribute("active")) {
    $element.removeAttribute("active")
    $element.style.display = "none";
    $button.innerText = "Luz!";
  }
  else {
    $element.setAttribute("active", "true")
    $element.style.display = "block";
    $button.innerText = "Noite!";
  }
}
body {
  background-color: black;
}

#luz {
  display: none;
  background-color: white;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<button id="switch" onclick="magica()">Luz!</button>
<div id="luz"></div>
    
02.02.2018 / 18:49
Individual methods or parameters in MySQL queries? Update OLEDB Not working