Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.09.2017, 22:24
Интересующийся
Отправить личное сообщение для alekspvn Посмотреть профиль Найти все сообщения от alekspvn
 
Регистрация: 10.08.2017
Сообщений: 19

Плавное открытие readmore
Подскажите пожалуйста как сделать чтоб при клике скрытый контент плавно открывался, и чтоб при повторном нажатии на кнопку , можно было свернуть его в исходное состояние. Мой код здесь, спасибо https://codepen.io/anon/pen/jGOmrB
Ответить с цитированием
  #2 (permalink)  
Старый 12.09.2017, 22:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

alekspvn,
https://javascript.ru/forum/misc/590...tml#post392937
Ответить с цитированием
  #3 (permalink)  
Старый 12.09.2017, 22:33
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Рони, чет мне кажется он не фурычит, подправьте.
Ответить с цитированием
  #4 (permalink)  
Старый 12.09.2017, 22:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

j0hnik,
ок https: добавил, проверь
Ответить с цитированием
  #5 (permalink)  
Старый 12.09.2017, 22:38
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие и закрытие одной кнопкой Jolly Элементы интерфейса 2 01.06.2017 12:24
Плавное и появление и плавное затухание аудио по мере анимации Enigrade Javascript под браузер 1 24.10.2016 08:26
Плавное открытие и закрытие блока текста web-expanse Общие вопросы Javascript 10 25.11.2014 15:25
Немного изменить скрипт помогите - плавное открытие div'ов Эдди Элементы интерфейса 4 26.09.2013 14:23
Плавное открытие окна. Flashton Элементы интерфейса 3 20.10.2010 16:00