Показать сообщение отдельно
  #6 (permalink)  
Старый 13.09.2017, 10:39
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

<!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>
Ответить с цитированием