Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Iaiá

Efeito para "empurrar" conteúdo

Por , em Javascript

Recommended Posts

Iaiá    0

Iaiá
Postado

Olá Pessoal,

 

Estou com uma dúvida..... tenho algo +/- assim no meu site:

 

TÍTULO1

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

 

TÍTULO2

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

 

Quero que os títulos fiquem um embaixo do outro com os seus conteúdos escondidos. No onclick de um determinado titulo, o conteúdo aparece empurrando os demais para baixo e quando clicar em outro título, acontece o mesmo, mas esconde de novo o que foi aberto anteriormente.

 

Já li algumas coisas de show/hide e tb de css com a propriedade display, até mesmo aqui no fórum, mas nada que eu tenha entendido.... será que alguém se habilita a me ajudar?

 

Muito obrigada!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ted k'    126

Ted k'
Postado

Amigo se ligue, você pode fazer assim:

 

<html>
<body>
<script>
function mostrarDiv(id) {
	document.getElementById(id).style.display = "block";
}

function esconderDiv(id) {
	document.getElementById(id).style.display = "none";
}
</script>

<a href="#" onClick="mostrarDiv('Exemplo01');">Titulo 01</a>

<div id="Exemplo01" style="display: none;">
<br>
conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo

conteúdoconteúdoconteúdoconteúdoconteúdoconteúdo
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Iaiá    0

Iaiá
Postado

<a href="#" onClick="mostrarDiv('Exemplo01');">Titulo 01</a><div id="Exemplo01" style="display: none;">

Na linha onde tem essa parte do código, ele acusa que falta um objeto esperado.... não entendo praticamente nada de js, ainda estou aprendendo.... alguém pode me dizer o q?Obrigada!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Teoricamente o que nosso amigo postou está certo, você copiou e colou?

Pegue esta adaptação de baixo e teste, ok?

 

<html><body><script>function mostrarDiv(id) {	document.getElementById(id).style.display = "block";}function esconderDiv(id) {	document.getElementById(id).style.display = "none";}</script><a href="#" onClick="mostrarDiv('Exemplo01');">Mostrar</a><a href="#" onClick="enconderDiv('Exemplo01');">Esconder</a><div id="Exemplo01" style="display: none;"><br>conteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdoconteúdo</div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Iaiá    0

Iaiá
Postado

Olá!Testei os 2... só copiei e colei em um novo documento para depois incluir o conteúdo da minha página e mesmo assim não deu.... na verdade, ele não executa a function "Esconder"... Obrigada de novo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Iaiá    0

Iaiá
Postado

Agora deu certo!Vou incluir o meu conteúdo!Só fiquei com uma dúvida..... só queria que o título chamasse a função Mostrar e a Esconder.... daí, caio naquele erro do primeiro exemplo, que o Ted 'K' passou: diz que falta um objeto esperado....Obrigada!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Faça uma adaptação...

 

function Div(id) {	var div =  document.getElementById(id);	if(div.style.display == "none")	{		 div.style.display = "block";	}	else	{		 div.style.display = "none";	}}

desse modo você pode sempre chamar a mesma função...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Iaiá    0

Iaiá
Postado

Sim, mas continuo não entendo uma coisa.... no html, no onClick ficou com um erro... Não é assim?

<a href="#" onClick="Div('Exemplo01');"><span class="subtitulos">Título1</a>

Muito obrigada pela ajuda e pela paciência!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito