<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
margin: 5px;
overflow: hidden;
}
.readMore{
color: blue;
}
</style>
</head>
<body>
<div class="short1">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Города агенство вопроса дороге переписали точках продолжил себя послушавшись взобравшись осталось алфавит она lorem предупреждал назад заглавных языкового ему, грамматики.</div>
<div class="short1">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Города агенство вопроса дороге переписали точках продолжил себя послушавшись взобравшись осталось алфавит она lorem предупреждал назад заглавных языкового ему, грамматики.</div>
<div class="short2">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Города агенство вопроса дороге переписали точках продолжил себя послушавшись взобравшись осталось алфавит она lorem предупреждал назад заглавных языкового ему, грамматики.</div>
<div class="short3">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Города агенство вопроса дороге переписали точках продолжил себя послушавшись взобравшись осталось алфавит она lorem предупреждал назад заглавных языкового ему, грамматики.</div>
<script>
// shortText (у блоков должен быть overflow:hidden)
function short(elt, he, tr){
var hs = he+'px',temp,
elt = document.querySelectorAll(elt);
[].forEach.call(elt, function(el,i){
el.insertAdjacentHTML('afterend', '<div class="readMore">Подробнее</div>');
el.style.height = hs;
el.style.transition = tr+'s';
el.nextElementSibling.addEventListener('click', function(e){
var prev = this.previousElementSibling;
if (prev.style.height == hs) {
prev.style.height = prev.scrollHeight+'px';
setTimeout(()=>{
prev.style.height = 'auto';
prev.style.transition = '0s';
},tr*1000);
this.textContent = "Свернуть";
this.classList.add('open');
}
else {
prev.style.height = getComputedStyle(el).height;
prev.style.transition = tr+'s';
setTimeout(()=>prev.style.height = hs,0);
this.textContent ='Подробнее';
this.classList.remove('open');
}
});
});
}
onload = function(){
short('.short1', 20, 0.4); //класс высота время анимации
short('.short2', 35, 0.4);
short('.short3', 55, 0.4);
};
</script>
</body>
</html>