К тому же, если убрать animate scrollTop, то приходится делать еще и третий клик
function f() {
$('.unit').click(function(){
if ($(this).css('max-height')=='50px') {
$(this).css('max-height','10000px');
$(this).css('transition','max-height 1.0s ease-in-out');
$('html, body').stop().animate({ scrollTop: $(this).offset().top - 150 }, 1000);
} else {
$(this).css('max-height','50px');
$(this).css('transition','max-height 0.2s ease-in-out');
$('html, body').stop().animate({ scrollTop: $(this).offset().top - 150 }, 100);
}
});
}
.unit {
overflow: hidden;
max-height: 50px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="unit" onclick="f();">
<h2>title 1</h2>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>
<div class="unit" onclick="f();">
<h2>title 2</h2>
<p>параграф</p>
<p>параграф</p>
<p>параграф</p>
</div>