Aplicar el mismo efecto a dos div que actuen de forma independiente.

[josema12441]

Hola amigos, se que debe ser una tonteria, pero no conozco aun suficiente sobre JS, pero quiero conseguir lograr algo.. quiero conseguir el tipico efecto que das click en una parte y se abre un cuadro con infromacio.. ya lo tengo. pero al querer aplicar otro cuadro igual, pero aparte. al hacer click en el primero se abren los dos! Como hago para q actuen de forma independiente???

el script es este:

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

{
$(".dbody").slideToggle("slow");

});



});

</script>

el html :

<div class="container">
<div class="dhead">
<div>
<h2>--> Letra <--</h2>
</div>

</div>
<div class="dbody">
<div id="texto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores doloribus consequuntur ullam non est animi nihil iusto repellendus cum asperiores impedit at deleniti tenetur, magnam quos eveniet eius officia fugit.</p> </div>

</div>
</div>

( EL otro es exactamente igual, solo cambia la informacion!!,, que deberia hacer? Graacias!

[cointreau17]

Buenas

Lo que tienes que hacer es crear otra clase para el segundo botón y cuadro de información y en js llamar a la clase que corresponde ej:
<script>
$(document).ready(function() {
$(".dhead").click(function() {
$(".dbody").slideToggle("slow");

});

$(".dhead2").click(function() {
$(".dbody2").slideToggle("slow");

});


});
</script>

y en el body:
--------------
<div class="container">
<div class="dhead">
<div>
<h2>--> Letra <--</h2>
</div>
</div>
<div class="dbody">
<div id="texto">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Maiores doloribus consequuntur ullam non est animi nihil iusto repellendus
cum asperiores impedit at deleniti tenetur, magnam quos eveniet eius officia fugit.
</p>
</div>
</div>
<div class="dhead2">
<div>
<h2>--> Letra2 <--</h2>
</div>
</div>
<div class="dbody2">
<div id="texto">
<p>
Otro texto de prueba
</p>
</div>
</div>
</div>

Un saludo

[Alexis88]

No es necesario asignar clases distintas, basta con que tomes al elemento al que se le dio el clic mediante la propiedad target del objeto del evento, el cual hace referencia al elemento en el que se produjo el evento.

Código Javascript:

$(".dhead").click(function(event){
    if (event.target.className == "dbody"){
        $(event.target).slideToggle("slow");
    }
});
 

Saludos

[marlanga]

jQuery linkea automáticamente el target: dentro de una función anónima de jquery, $(this) es el objeto jQuery que lanzó el evento.

ASí que sólo se necesita un $(this).slideToggle("slow");

[Alexis88]

Iniciado por marlanga

jQuery linkea automáticamente el target: dentro de una función anónima de jquery, $(this) es el objeto jQuery que lanzó el evento...

Eso sería en el caso de que se haya vinculado el evento al elemento en cuestión, pero mira cómo lo está haciendo.

Eso aplicaría para esto (que sería lo más adecuado):

Código Javascript:

$(".dbody").on("click", function(){
    $(this).slideToggle("slow");
});
 

[Alterno]

Iniciado por Alexis88

No es necesario asignar clases distintas, basta con que tomes al elemento al que se le dio el clic mediante la propiedad [URL="http://api.jquery.com/event.target/"][inline]target[/inline][/URL] del objeto del evento, el cual hace referencia al elemento en el que se produjo el evento.

Código Javascript:

$(".dhead").click(function(event){
    if (event.target.className == "dbody"){
        $(event.target).slideToggle("slow");
    }
});
 

Saludos

Yo tengo una duda similar, la diferencia es que la acción la emite un objeto distinto y otro objeto es el que la aplica...
http://www.forosdelweb.com/f91/como-aplico-mismo-efecto-jquery-dos-objets-divs-1137312/