Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
ola,
tenho 2 divs não aninhados, e estou usando o método visibily e hidden, para ocultar algumas informações, e gostaria de quando ocultar o div1 e exibir o div2, o div2 assuma a posição do div1.
mais uma coisa, dando uma olhada no exemplo abaixo, eu tenho os divs 3 e 4 que deverão fazer a mesma coisa que os divs 1 e 2, mas quero que quando eu abra o div2 o div3 desça o suficiente para ser sobreposto, e quando eu fechar o div2 ele volte a posição ocupando o espaço deixado pelo div2.
Obrigado
http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif
estou usando o seguinte código para teste.
<html>
<head>
<meta http-equiv="Content-Language" content="pt-br">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Data e Hora</title>
<style type=text/css>
.horax {
background: #000000;
border: 1px solid #FFF;
padding: 0;
margin: 0 auto;
position: relative;
float: left;
}
.TABLEX {
background: #00FF00;
WIDTH: 100%;
}
</style>
</head>
<script type="text/javascript">
function togglecategory(div1, div2, add) if (add == 'x')
{
document.getElementById(div1).style.visibility = 'hidden';
document.getElementById(div2).style.visibility = 'visible';
document.getElementById(div2).style.display = ''
}
else
{
document.getElementById(div1).style.visibility = 'visible';
document.getElementById(div2).style.visibility = 'hidden';
}
}
</script>
<body>
<p> </p>
<p> </p>
<div align="center">
<table class="princ" border="0" width="100%" id="table1" >
<tr>
<td class="esquerda" width="55%" align="left" valign="top">
<div class="horax" style="Display:show" id="hora">
<div align="center">
<table class="TABLEX" border="1" width="100%">
<tr>
<td width="431">Data e Hora</td>
<td><a href="#" onmousedown=togglecategory("hora","hora1","x")>FECHAR </a></td>
</tr>
</table>
</div>
</div>
<div class="horax" style="Display:none" id="hora1">
<div class="tablex" >
<table border="1" width="100%">
<tr>
<td width="431">Data e Hora</td>
<td><a href="#" onmousedown=togglecategory("hora","hora1","Y")>FECHAR</a></td>
</tr>
</table>
</div>
<table border="1" width="100%" bordercolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF">teste</td>
</tr>
<tr>
<td align="center" bgcolor="#000000"><font color="#FFFFFF">valor</font></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">final</td>
</tr>
</table>
</div>
<div class="horax" style="Display:show" id="hora2">
<div align="center">
<table class="TABLEX" border="1" width="100%">
<tr>
<td width="431">Data</td>
<td><a href="#" onmousedown=togglecategory("hora2","hora3","x")>FECHAR </a></td>
</tr>
</table>
</div>
</div>
<div class="horax" style="Display:none" id="hora3">
<div class="tablex" >
<table border="1" width="100%">
<tr>
<td width="431">Hora</td>
<td><a href="#" onmousedown=togglecategory("hora2","hora3","Y")>FECHAR</a></td>
</tr>
</table>
</div>
<table border="1" width="100%" bordercolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF">teste</td>
</tr>
<tr>
<td align="center" bgcolor="#000000"><font color="#FFFFFF">valor</font></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">final</td>
</tr>
</table>
</div></td>
<td width="86" align="left" valign="top">
meio<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </td>
<td class="direita" align="left" valign="top" width="39%">
<div class="horax" style="Display:show" id="data">
<div align="center">
<table class="TABLEX" border="1" width="100%">
<tr>
<td width="431">Data e Hora</td>
<td><a href="#" onmousedown=togglecategory("data","data1","x")>FECHAR </a></td>
</tr>
</table>
</div>
</div>
<div class="horax" style="Display:none" id="data1">
<div class="tablex" >
<table border="1" width="100%">
<tr>
<td width="431">Data e Hora</td>
<td><a href="#" onmousedown=togglecategory("data","data1","Y")>FECHAR</a></td>
</tr>
</table>
</div>
<table border="1" width="100%" bordercolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF">teste</td>
</tr>
<tr>
<td align="center" bgcolor="#000000"><font color="#FFFFFF">valor</font></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">final</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<p> </p>
<p> </p>
<p>O <ACRONYM TITLE="Dynamic HyperText Markup Language">DHTML</ACRONYM> é a principal linguagem dos webmaster para criar websites. </p>
</body>
</html>Carregando comentários...