<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример</title>
</head>
<body>
<style>
.spoiler-btn {
color: red;
font-size: 20px;
}
.more {
max-height: 100px;
overflow: hidden;
transition: 1s;
}
.open{
max-height:1200px;
transition: 1s
}
</style>
<div class="more">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellat impedit optio earum. Praesentium debitis ex quas commodi nostrum, architecto rem quis voluptatem quasi nam ad quam, fugiat natus? Distinctio!</div>
<div>Quae alias laborum doloribus officia quisquam facere suscipit animi maxime molestias! Officia, perspiciatis. Expedita minus, soluta tempore amet possimus eum dolores modi. Facilis, eligendi ratione sunt fugit consequatur aspernatur. Officiis.</div>
<div>Fuga necessitatibus eum nesciunt. Necessitatibus, perspiciatis quaerat non odio eveniet inventore ad atque omnis, veniam soluta, consequuntur beatae architecto similique. Accusamus asperiores cupiditate eaque veniam accusantium aspernatur dolorem esse tempora.</div>
<div>Officia consectetur laudantium perspiciatis saepe quod explicabo sit distinctio. Animi ea iste delectus inventore magni doloremque soluta dignissimos quam voluptate labore nemo adipisci, nam, porro iusto id totam consequuntur consequatur.</div>
<div>Fuga, sequi mollitia? Eveniet maiores architecto odio quas tenetur. Fuga atque dolorem ipsam tempore consequuntur laboriosam iure repellendus, doloremque fugiat perspiciatis, tempora a consectetur in voluptates. Aspernatur laborum alias totam.</div>
<div>Sit a error fugit culpa delectus deleniti cum ad esse doloribus, laboriosam ex iste, commodi dolorem, cumque ab. Sunt illo saepe dolore ipsum sed, ducimus iure eveniet quam dicta omnis.</div>
<div>Deserunt consequuntur explicabo sunt distinctio eligendi veniam eum natus repudiandae dignissimos odio ullam totam accusamus reprehenderit voluptate dolor molestiae modi doloribus nam rerum minima rem, iste tenetur ex? Illum, soluta?</div>
<div>Tempora optio corrupti rerum maxime hic magni id repudiandae at possimus sapiente illum, pariatur perferendis ipsa exercitationem quibusdam, aliquid maiores culpa architecto, nobis a explicabo? Nam odit mollitia accusantium similique.</div>
</div>
<div class="spoiler-btn">read more</div>
<script>
document.querySelector('.spoiler-btn').onclick = function(){
document.querySelector('.more').classList.toggle('open');
}
</script>
</body>
</html>
|