Ocultar Ou Mostrar, Vice-versa

frnd · Julho 3, 2007

Como fazer para quando clicar ocultar e clicar novamente aparecer os dados... por exemplo na pagina inicial do forum, onde tem os assuntos onde voce pode "minimiza-los" e "maximiza-los"....

[]s

.Andreia. · Julho 4, 2007

Um exemplo bem simples que montei:

<script>
function ExpandeDiv()
{
	if (document.getElementById("div1").style.display == 'none')
	{
		document.getElementById("div1").style.display = 'block';
		document.getElementById("imagem").src = "menos.gif";
	}
	else
	{
		document.getElementById("div1").style.display = 'none';
		document.getElementById("imagem").src = "mais.gif";
	}
}
</script>


<table border="1" width="200" cellspacing="0" cellpadding="0">
	<tr bgcolor="#0E7D92">
		<td width="50%">&nbsp;<font color="white" face="verdana" size="2">Título da Div</font></td>
		<td width="50%" align="right"><a href="java script:;" onclick="ExpandeDiv()"><img id="imagem" src="menos.gif" border="0"></a></td>
	</tr>
	<tr>
		<td colspan="2"><div id="div1" style="display:block">Aqui vem as informações que devem ser exibidas na Div</div></td>
	</tr>
</table>

frnd · Julho 4, 2007

obrigado, era isso que eu queria!

Eu alterei algumas coisas... fiz com que ele ficasse minimizado com o desenho de maximizar em cima, e quando estiver maximizado estar com o minizado acima..

mas só funciona a imagem quando a página é aberta pela primeira vez.. e depois as figuras não aparecem mais,

segue abaixo a página inteira já com o script alterado:

<html>
     <head>
     </head>
     <body>  
        <script>
            function ExpandeDiv()
            {
            if (document.getElementById("div1").style.display == 'none')
            {
            document.getElementById("div1").style.display = 'block';
            document.getElementById("imagem").src = "JS - ocultar e mostrar/minimizar.gif";
            }
            else
            {
            document.getElementById("div1").style.display = 'none';
            document.getElementById("imagem").src = "JS - ocultar e mostrar/maximizar.gif";
            }    
            }
        </script>

<a href="java script:;" onclick="ExpandeDiv()"><img id="imagem" src="minimizar.gif" border="0"></a>
        <div id="div1" style="display:block">Aqui vem as informações que devem ser exibidas na Div
        
     </body>
</html>

.Andreia. · Julho 4, 2007

não entendi... aqui funciona perfeitamente.

frnd · Julho 4, 2007

Voce testou o programa que mandei por ultimo?

.Andreia. · Julho 4, 2007

Sim, claro... qual navegador você está usando?

frnd · Julho 4, 2007

No IE 6.0 dá esse problema, mas no firefox ele não muda a figura.. só fica no botao minimizar

Editado Julho 4, 2007 por frnd

.Andreia. · Julho 4, 2007

Poizeh, eu testo na web e acontece o que você disse mas na minha maquina funciona normal, bom tenta agora:

<html>
     <head>
     </head>
     <body>  
        <script>
            function ExpandeDiv()
            {
            if (document.getElementById("div1").style.display == 'none')
            {
            document.getElementById("div1").style.display = 'block';
            document.getElementById("imagem").src = "JS - ocultar e mostrar/minimizar.gif";
            }
            else
            {
            document.getElementById("div1").style.display = 'none';
            document.getElementById("imagem").src = "JS - ocultar e mostrar/maximizar.gif";
            }    
            }
        </script>

<a href="#" onclick="ExpandeDiv()"><img id="imagem" src="minimizar.gif" border="0"></a>
        <div id="div1" style="display:block">Aqui vem as informações que devem ser exibidas na Div</div>

     </body>
</html>

frnd · Julho 4, 2007

ainda persiste o mesmo problema, será que deve ser algum problema besta?

[]s

.Andreia. · Julho 4, 2007

link que comprova:

http://webdesenvolv.brinkster.net/teste1.html

ve se está certo ai pra você e de uma olhada no codigo fonte

Julho 4, 2007

Nossa, que estranho.. só alterei os nomes das figuras e acontece o mesmo problema...

frnd · Julho 4, 2007

por besteira minha esqueci de alterar o nome da figura, agora está OK, que nem o mostrado no site

obrigado

Estou fazendo diferente um pouco, mas o pensamento é o mesmo..

No exemplo que a andreia me passou utiliza-se com div ID, no que vou utilizar é com div CLASS, então alterei no JS o GetElementByClass. Está certo? desta maneira abaixo:

<script language="JavaScript">
            function ExpandeDiv()
            {
            if (document.getElementByClass("parte1curriculoegresso").style.display == 'none')
            {
            document.getElementByClass("parte1curriculoegresso").style.display = 'block';
            document.getElementById("imagem").src = "menos.gif";
          
            else
            {
            document.getElementByClass("parte1curriculoegresso").style.display = 'none';
            document.getElementById("imagem").src = "mais.gif";
            }    
            }
</script>
<body>
    <a href="#" onclick="ExpandeDiv()"><img id="imagem" src="menos.gif" border="0"></a>
        <div class="parte1curriculoegresso" style="block">
</body>

[]ss

Entrar

Ocultar Ou Mostrar, Vice-versa

Pergunta

Link para o comentário

Compartilhar em outros sites

11 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest frnd

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns