Pierreszwk Pierreszwk - 3 months ago 10
Javascript Question

Click and show more element

I have a problem in my js program.
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

Thank you for your help

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

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 ids in your html.

Comments