Show / Hide block in JavaScript
If the content is within div
, then ...
We'll use a CSS style sheet to set the visibility of div
<style>
#oculto{
display: none;
}
</style>
The block we will use to hide
<div id="oculto">
Seu conteúdo a ser ocultado
</div>
The button to show / hide the div
<button onclick="mostrar();">Botão</button>
JavaScript script that will hide / show the div
<script>
var visivel = false;
function mostrar(){
var objDiv = document.getElementById('oculto');
if (visivel == false){
objDiv.style.display = "block";
visivel = true;
}else{
objDiv.style.display = "none";
visivel = false;
}
}
</script>
<style>
#oculto{
display: none;
}
</style>
<div id="oculto">
Conteúdo
</div>
<button onclick="mostrar();">Mostar/ocultar</button>
<script>
var visivel = false;
function mostrar(){
var objDiv = document.getElementById('oculto');
if (visivel == false){
objDiv.style.display = "block";
visivel = true;
}else{
objDiv.style.display = "none";
visivel = false;
}
}
</script>
What this script does is the following:
Declare a 'visible' variable and assign the value 'false' beforehand.
Declares the variable 'objDiv' which is the element we will hide.
Make a condition so that if visible it is false, it should show 'objDiv' and reassign a value to the variable, in this case, a counter value. And if the visible case is true, it does not show 'objDiv' and also reassigns a counter value to the current variable.
In your case, how you want to darken the screen and things like that, you should style with CSS.
Read more about CSS here
Read more about conditionals here