Klicken Sie und zeigen Sie mehr Element

Question

Ich möchte mehr zeigen, wenn Sie auf die div ShowMore klicken, aber wenn ich es tun, zeigen alle Abschnitt mehr und nicht das Element, wo ich nur klicken.

Zusammenfassend, wenn Sie auf das div .showMore klicken, erhöht div .panel die Höhe, um versteckten Text anzuzeigen. Aber wenn ich auf den .showMore mit der Klasse jedes div klicken .panel auch animieren, während ich bin nur die angeklickt div belebte Höhe

Ich denke, das ist eine kleine Codezeile, die ich vermisse

JS

$(".showMore").click(function(){ 
if ($(".panel").height() == 100) { 
    $(this).css({transform:"rotate(90deg)"}); 
$(".panel").animate({height: "250px"}); 
} 
else if ($(".panel").height() == 250) { 
    $(this).css({transform:"rotate(0deg)"}); 
    $(".panel").animate({height: "100px"}); 
} 
}); 

Full code here: Codepen

Answer 1

Suche Element mit Klasse panel das Element geklickt enthält:

$(".showMore").click(function(){ 

    var panel = $(this).closest(".panel"); 

    if (panel.height() == 100) { 
    $(this).css({transform:"rotate(90deg)"}); 
    panel.animate({height: "250px"}); 
    } 
    else if (panel.height() == 250) { 
    $(this).css({transform:"rotate(0deg)"}); 
    panel.animate({height: "100px"}); 
    } 
}); 

Hinweis: loszuwerden doppelten id s in Ihrem HTML.

Answer 2

Sie müssen nur Eltern durch den Zugriff auf Elemente seiner Verwendung von $(this) ein bisschen mehr machen.

//alert('ok'); 
    $(".showMore").click(function(){ 
    if ($(".panel").height() == 100) { 
     $(this).css({transform:"rotate(90deg)"}); 
    $(this).parent(".panel").animate({height: "250px"}); 
    } 
    else if ($(this > ".panel").height() == 250) { 
     $(this).css({transform:"rotate(0deg)"}); 
     $(this).parent(".panel").animate({height: "100px"}); 
    } 

Answer 3

$(".showMore").click(function(){ 
    var height=$(this).parent().height(); 
    if (height == 100) { 
     $(this).css({transform:"rotate(90deg)"}); 
    $(this).parent().animate({height: "250px"}); 
    } 
    else if (height == 250) { 
     $(this).css({transform:"rotate(0deg)"}); 
     $(this).parent().animate({height: "100px"}); 
    } 
}); 

http://codepen.io/beshoysemsem/pen/xOQmRQ