How do I get a div to start hiding?

Asked

Viewed 3,338 times

1

I have a Function here that makes the div look invisible and visible, but it gets visible, I would like it to get invisible.

javascript html css

  • How is your Function and your div? but display: none makes an invisible element

  • this is Function, Function Mudarestado(el,g) { var display = Document.getElementById(el).style.display; if(display == "None") Document.getElementById(el).style.display = 'block'; Else Document.getElementById(el).style.display = 'None'; //insert variable state_onibus, target for the uploaded file.php }

  • You can only use CSS to solve this! Want an example?

  • Hidden

5 answers

3

since you are manipulating the css property display to start with the 'invisible' element just add in the css properties of this element:

display:none

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 secret, just put this code on your div:

display: none;

This is an example of your div:

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

2

An option with CSS only to be included if you don’t 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>

1

Follow this basic example:

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

1

An example of how to start an invisible element and switch 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>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.