Question

I am trying to accomplish a simple box selection and indicate which one is clicked.

$(".features").click(function(){
    $(".pBox").css("border-color","#ccc");
    $(this).parent().parent().css("border-color","#cc0000");
    $(this).parent().parent().animate({
        height: "20%"
    });
}); 

Also I would like to increase the height of the box by 10%, unfortunately, while the color of selected box changes, I have no luck with changing the height. If I change the width, it works fine… What am I missing?

Answer 1

Try this

$(".features").click(function(){
    $(".pBox").css("border-color","#ccc");
    var $parent = $(this).parent().parent();
    $parent
    .css("border-color","#cc0000");
    .animate({
        height: ($parent.height() + (0.1 * $parent.height()))
    });
});