Exibir e ocultar DIV com Javascript
Aqui vamos manipular o CSS através do JS para exibir e ocultar uma DIV.
Por diversos motivos, precisamos em determinadas ocasiões ocultar uma div ou exibil-la, alguns recomendam a utilização do jQuery para o mesmo.
jQuery nem sempre é ideal para tudo, quando você conseguir fazer algo sem usar a biblioteca jQuery, terá resultados de desempenho melhores.
Nesta matéria você aprenderá como ocultar Divs, vamos utilizar funções para o mesmo, no jQuery você faria usando o evento do botão quando clicado e chamar a função hide ou show.
Vamos deixar de conversa e ir direto ao assunto, presumo que seu código HTML esteja pronto, abaixo notamos nosso código HTML.
Abaixo é exibido o nosso HTML com o CSS, não se assunte, o código esta grande devido ao CSS referente ao botão que foi gerado no site (www.cssbuttongenerator.com).
Note que temos três botões e uma div, um botão vai exibir, outro ocultar e o último fazer os dois.
Código 01:
<title>Ocultar div com CSS</title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0 auto; padding:0;}
#dvCentro{
width:500px;
border:1px solid #000;
}
#dvConteudo{
padding:10px;
}
.btn {
-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
box-shadow:inset 0px 1px 0px 0px #97c4fe;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=' #3d94f6', endColorstr=' #1e62d0' );
background-color:#3d94f6;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
border:1px solid #337fed;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #1570cd;
}
.btn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
background-color:#1e62d0;
}.btn:active {
position:relative;
top:1px;
</style>
<script type="text/javascript">
</script>
<div id="dvCentro">
<button id="btnExibe" class="btn">Exibir</button>
<button id="btnOculta" class="btn">Ocultar</button>
<button id="btnExibeOculta" class="btn">Exibir/Ocultar</button>
<br><br><br><br>
<div id="dvConteudo"><!-- Div na qual vamos manipular.-->
<span style="font-weight:bold;">Lorem Ipsum</span> é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</div>
</div>
Vamos ao nosso JS, primeiro temos que criar uma função para ocultar a DIV, o estilo necessário para isto no CSS é Display:none; e para exibir Display:Block;, com base nestes dois estilos, vamos precisar acessar o objeto dvConteudo (id) e trocar o valor do style dele, no código abaixo podemos notar isto.
Insira o código dentro da tag scriptm como mostra o exemplo abaixo.
<script>
//Código aqui...
</script>
Código 02:
<script type="text/javascript">
var visibilidade = true; //Variável que vai manipular o botão Exibir/ocultar
function exibir() {
document.getElementById("dvConteudo").style.display = "block";
}
function ocultar() {
document.getElementById("dvConteudo").style.display = "none";
}
function ocultarExibir() {
}
</script>
Utilizando, document.getElementById(“id do objeto”) acessa um objeto, no nosso caso acessamos a propriedade style que é o estilo do mesmo e em seguida definimos um valor para o atributo display que assumimos none ou block.
Display: none - Oculta um objeto da tela.
Display: block – Exibe um objeto em forma de bloco na tela.
Display: inline – Exibe objetos na mesma linha.
Criamos também três funções e uma variável que usaremos posteriormente, estas função só funcionarão se forem chamadas, então no clique de cada botão deve haver uma chamada para sua respectiva função.
Dentro dos atributos do nosso botão, vamos utilizar onclick=”nomeDaFuncao();”, note o código como fica logo abaixo.
Código 03:
Feito isto, note que se clicarmos no botão Ocultar e Exibir, as operações já serão executadas, ocultando e exibindo a div que especificamos.
Por último programamos o código do nosso botão que executa as duas operações, note o código abaixo, todo comentado.
Código 04:
var visibilidade = true; //Variável que vai manipular o botão Exibir/ocultar
function exibir() {
document.getElementById("dvConteudo").style.display = "block";
}
function ocultar() {
document.getElementById("dvConteudo").style.display = "none";
}
function ocultarExibir() { // Quando clicar no botão.
if (visibilidade) {//Se a variável visibilidade for igual a true, então...
document.getElementById("dvConteudo").style.display = "none";//Ocultamos a div
visibilidade = false;//alteramos o valor da variável para falso.
} else {//ou se a variável estiver com o valor false..
document.getElementById("dvConteudo").style.display = "block";//Exibimos a div..
visibilidade = true;//Alteramos o valor da variável para true.
}
}
Por hora é isso, qualquer dúvida, deixe nos comentários.