Ir para conteúdo

POWERED BY:

Arquivado

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

Eduardo Kalsing

[Resolvido] Aparecer e ocultar div com AJAX

Por , em Javascript

Recommended Posts

Eduardo Kalsing    0

Eduardo Kalsing
Postado

Bom dia!

Tenho uma função simples que, quando clica em um link, abaixo abre conteúdo de uma div oculta.

A função que tenho só abre uma div, porém meu conteúdo será dinâmico, então precisarei de várias div's.

Não sou nada bom em lógica, então alguém que poderia me dar uma luz aí?

 

Script:
<script type="text/javascript">
	$(document).ready(function(){

        $('#cont_resposta').hide();

        $('a#exibir').click(function(){

        $('#cont_resposta').show('slow');

        });

        $('a#ocultar').click(function(){

         $('#cont_resposta').hide('slow');
         })

        });
</script>

html:
<a href="#" id="exibir"><p class="pergunta">blablabla</p> </a>
                            <div id="cont_resposta">
                                <p class="resposta">blablabla</p>
                                <a id="ocultar" href="#">Ocultar</a>
                            </div>
                        <a href="#" id="exibir"><p class="pergunta">blablabla</p></a>
                            <div id="cont_resposta">
                                <p class="resposta">blablabla</p>
                                <a id="ocultar" href="#">Ocultar</a>
                            </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

já que tá usando jQuery, fica tudo bem simples..

 

como você não pode repetir IDs, use classes.

 

exemplo:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$('.resposta').hide();

	$('p.pergunta').click(function( e ){
		e.preventDefault();
		$( this ).next('.resposta').toggle('slow');
	});
	$('.resposta a').click(function( e ){
		e.preventDefault();
		$( this ).parent('.resposta').hide('slow');
	});
});
</script>
<style type="text/css">
.pergunta { cursor: pointer; color: #00f; text-decoration: underline; }
</style>
</head>
<body>
	<p class="pergunta">blablabla</p>
	<div class="resposta">
		<p>blablabla</p>
		<a href="#">Ocultar</a>
	</div><!-- /resposta -->

	<p class="pergunta">blablabla</p>
	<div class="resposta">
		<p>blablabla</p>
		<a href="#">Ocultar</a>
	</div><!-- /resposta -->	

	<p class="pergunta">blablabla</p>
	<div class="resposta">
		<p>blablabla</p>
		<a href="#">Ocultar</a>
	</div><!-- /resposta -->
</body>
</html>

Não tem nada de ajax nisso !

para melhor organizar, estou movendo para o fórum principal.

Compartilhar este post

Link para o post
Compartilhar em outros sites

duca041    0

duca041
Postado

Como ficaria se eu quisesse ocultar a div no mesmo link ou se eu clicasse em outro item...

ex:

 

Digamos que por padrão o primeiro item ficasse aberto, e quando eu clicasse no segundo "blablabla" ele fechasse o primeiro e mostrasse o segundo....

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

assim:

        $('p.pergunta').click(function( e ){
               e.preventDefault();

               $('p.resposta').hide();
               $( this ).next('.resposta').toggle('slow');
       });

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