Visibilidade de Div - CSS e Javascript
8/05/2008Hoje trago um tutorial simples, porém quando bem aplicado pode gerar um resultado muito interessante, envolve CSS e Javascript, geralmente é feito por programadores. Consiste em alterar a visibilidade de uma DIV.
Quando setamos a propriedade visibility como hidden no CSS, fazemos com que o objeto desapareça da tela, entretando o seu espaço fica vazio. Já quando setamos a propriedade display como none, fazemos com que o objeto desapareça e seu espaço também, assim se existir outro elemento embaixo do que desapareceu, esse irá tomar o seu lugar.
<html>
<head>
<title>Tutorial - Abrir e Fechar Div</title>
<style type=“text/css”>
div.camada1{
background-color: cyan;
width:100px;
height:100px;
position:absolute;
top:50px;
left:50px;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-top-style:solid;
border-right-color:navy;
border-bottom-color:navy;
border-left-color:navy;
border-top-color:navy;
}
div.camada2{
background-color: yellow;
width:100px;
height:100px;
position:absolute;
top:50px;
left:180px;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-top-style:solid;
border-right-color:navy;
border-bottom-color:navy;
border-left-color:navy;
border-top-color:navy;
}
</style>
<script language=“javascript”>
function alteraVisibilidade()
{
cam = document.getElementById(’c1′);
if(cam.style.visibility == ‘hidden’)
cam.style.visibility = ‘visible’;
else
cam.style.visibility = ‘hidden’;
}
function alteraVisibilidade2()
{
cam = document.getElementById(’c2′);
if(cam.style.display == ‘none’)
cam.style.display = ‘inline’;
else
cam.style.display = ‘none’;
}
</script>
</head>
<body>
<div id=”c1″ class=”camada1″>Texto da camada 1</div>
<div id=”c2″ class=”camada2″>Texto da camada 2</div>
<form action=”" method=”get”>
<input name=”" type=”button” onClick=”alteraVisibilidade();” value=”Alterar Camada 1″ />
<input name=”" type=”button” onClick=”alteraVisibilidade2();” value=”Alterar Camada 2″ />
</form>
</body>
</html>
Quando os botões são clickados chamam as funções javascript que pegam os elementos pelo id (getElementById), assim seta as propriedades, escondendo as DIV’s.
Caso tenha problemas, baixe o arquivo AQUI.
Comente