Uma forma simples de exibir conteúdo conforme a ação do usuário é através de camadas e JavaScript.
Um ícone de ajuda, por exemplo, ao ser clicado pode exibir uma camada com informações pertinentes, e esta mesma camada, ao ser clicada, pode se ocultar.
O evento JavaScript para fazer isto é o sequinte:
function controlaCamada(nomeDiv)
{
if( document.getElementById(nomeDiv).style.visibility == "hidden" )
{
document.getElementById(nomeDiv).style.visibility = "visible";
} else
{
document.getElementById(nomeDiv).style.visibility = "hidden";
}
}
Ou seja, caso a camada esteja visível, então esconde, caso esteja escondida, então exibe!
O código a ser inserido no HTML é o seguinte:
<div id="nome" onClick="controlaCamada('nome')">
Texto desejado
</div>A camada possui um evento
onClick. Quando clicada executa a função controlaCamada() em JavaScript, que faz exatamente o que foi mencionado acima!Este evento
onClick chamando a função JavaScript pode ser adicionado a qualquer elemento, como em um ícone de ajuda por exemplo, que quando clicado, exibe a camada, e a camada ou o ícone, quando clicado de novo, esconde a camada. Magia pura!
8 comentários:
Funcionou, so que na 1a vez, o link precisa ser clicado 2x
Pust Depois de passar o dia todo procurando achei a solução para meu problema. Valeu!
Maneiro, brigadão ^^
Agora eu queria saber como faço para um DIV já iniciar Oculto, será que tem como me ajudar?
Evandson, coloca na propriedade do DIV (CSS) o parâmetro display: none;
Caro amigo. Realmente foi de muita valia seu código. Muito obrigado pela iniciativa.
Implementei sua função, pois ela estava dando problema quando clicava na primeira vez. Porém não consigo postar o código aqui pois o blogger.com não permite tags.
Coloquei a solução no meu blog, segue: http://doceangel.wordpress.com/2010/10/08/exibir-e-esconder-div-com-javascript/
Beijoss
Boa noite, gostaria de saber como faço para implementar uma função de mostrar/esconder determinada parte da minha postagem idêntica ao do link abaixo ?
http://www.receita.fazenda.gov.br/PessoaFisica/IRPF/2011/perguntao/assuntos/obrigatoriedade.htm
Aguardo sua resposta, obrigado !
Phsnake,
O código deste post faz justamente o que é feito no link que você passou.
No post, no lugar de "Texto desejado" você coloca o texto que você quer, que no caso do link que você passou é uma pergunta sobre IRPF.
Postar um comentário