Efeito Toggle

[NuneOliveira 0]

Bem galera, minha dúvida é simples.

Eu estou com o seguindo código:

HTML:

<div id="box_xat">
    Mensagem 1.
</div>
<div id="time_xat">
    23 de Janeiro de 2015, 12h47
</div>
<div id="box_xat">
    Mensagem 2.
</div>
<div id="time_xat">
    23 de Janeiro de 2015, 12h49
</div>
<div id="box_xat">
    Mensagem 3.
</div>
<div id="time_xat">
    23 de Janeiro de 2015, 12h51
</div> 

jQuery:

$('#box_xat').click(function(event) {
     event.preventDefault();
      $('#time_xat').toggle("slow");
});

Então é o seguinte, o código jQuery ele está em um link externo.

O efeito ele funciona normal apenas na primeira DIV na segunda DIV ele já não funciona.

 

Será que existe alguma forma de fazer apenas uma função jQuery 'funcionar' em várias DIV's?

 

Por exemplo, fazer esse codigo jQuery rodar em todas as DIV's, sem ter que criar uma função pra cada DIV.

 

Acho que deixei claro a minha duvida, se não, por favor me ajudem que posso esclarecer melhor!

 

Agradeço desde já aos comentários...

[Rafael Sirotheau 43]

Os listeners são adicionados conforme o seu seletor. Sendo assim, como você fez, apenas irá funcionar para o seletor #box_xat.

Você pode adicionar classe em todas as div que você quer que recebem a função. Ex.

<div id="box_xat" class="toggleEffect">
    Mensagem 1.
</div>
<div id="time_xat" class="toggleEffect">
    23 de Janeiro de 2015, 12h47
</div>
<div id="box_xat" class="toggleEffect">
    Mensagem 2.
</div>
<div id="time_xat" class="toggleEffect">
    23 de Janeiro de 2015, 12h49
</div>
<div id="box_xat" class="toggleEffect">
    Mensagem 3.
</div>
<div id="time_xat" class="toggleEffect">
    23 de Janeiro de 2015, 12h51
</div> 

E, então, trocar seu código para

$('.toggleEffect').click(function(event) {
     event.preventDefault();
      $(this).toggle("slow");
});

[NuneOliveira 0]

 

 

Muito obrigado! Realmente era isso! Tive que da uma otimizada no site, mas era isso! Valeu! =D