villiwalla,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.desc-it {
height: 0; opacity: 0;
}
.items.acti .panel-heading{
color: #FF0000;
}
.desc-it.acti{
border: 2px solid #FF00FF;
}
.mr{
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
$(".items").each(function(indx, item) {
$(".mr", item).on("click", function(event) {
event.preventDefault();
var op = $(item).toggleClass("acti").is(".acti"),
content = $(".desc-it", item);
op = op ? {
height: content[0].scrollHeight,
opacity: 1
} : {
height: 0,
opacity: 0
};
content.stop().toggleClass("acti").animate(op, 1000)
})
})
});
</script>
</head>
<body>
<div class="items panel panel-default col-md-3">
<div class="panel-heading row">title</div>
<div class="panel-body row">
<form >
<div class="desc-it">content</div>
</form>
<a class="mr" >Все характеристики <br> <i class="fa fa-angle-double-down"></i></a>
</div>
</div>
<div class="items panel panel-default col-md-3">
<div class="panel-heading row">title</div>
<div class="panel-body row">
<form >
<div class="desc-it">content<br><br><br><br><br>content</div>
</form>
<a class="mr" >Все характеристики <br> <i class="fa fa-angle-double-down"></i></a>
</div>
</div>
</body>
</html>