<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block{
width: 300px;
height: 0;
overflow: hidden;
opacity: 0;
transition: 2s;
}
.active{
opacity: 1;
height: 150px;
}
</style>
</head>
<body>
<button>клик</button>
<div class="block">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал свое даже проектах lorem, путь предложения злых текст на берегу ipsum, журчит скатился своих алфавит путь вершину ведущими свой живет.</div>
<script>
document.querySelector('button').onclick=function(){
document.querySelector('.block').classList.add('active');
};
</script>
</body>
</html>