单击并显示更多元素

Question

I want to show more when you click on the div ShowMore but when I do it all section show more and not the element where I just click .

In summary when you click on the div .showMore , div .panel increases in height to show hidden text . But when I click on the .showMore every div with the class .panel also animate while I am only the clicked div animate height

I guess that is a small line of code that I miss

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

You just need to make use of $(this) a bit more by accessing it's parent element.

    //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 2

Find element with class panel that contains clicked element:

$(".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"});
  }
});

Note: get rid of duplicate id s in your html.

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