Как сделать плавный спойлер?

Question

[S3R3BRO]

Добрый вечер!
Подскажите пожалуйста, как можно из этого кода сделать:
1) Плавное открытие и закрытие.
2) После закрытия чтоб страница поднималась вместе с закрывающемся спойлером до начала его открытия.

Или есть варианты на JS?

<div class="ba-testimonial__body">
	Спойлер — это раскрытие интриги, влияющее на восприятие сюжета книги или фильма.
	</br>
	<div class="ba-testimonial__more" id="timore01">
		Например, в детективах спойлером является имя убийцы. Чтобы не портить удовольствие от предстоящего чтения или просмотра фильма, текст спойлера прячут, оставляя возможность его просмотреть тем, кто хочет узнать подробности сюжета.
	</div>
	<button class="ba-extra-text ba-testimonial__toggle" onclick="document.getElementById('timore01').classList.toggle('open')" aria-label="Читать далее" data-more-text="Читать далее" data-less-text="Свернуть"></button>
</div>

.ba-testimonial p {
	margin-bottom: 16px
}
.ba-testimonial__body>:last-child {
	margin-bottom: 0
}
.ba-testimonial__toggle {
	color: var(--color);
	font-size: 14px
}
.ba-testimonial__toggle:hover {
	color: var(--color);
	text-shadow: 0 0 5px
}
.ba-testimonial__toggle:before {
	content: attr(data-more-text)
}
.open+.ba-testimonial__toggle:before {
	content: attr(data-less-text)
}
.ba-testimonial__more {
	display: none;
	margin-bottom: 0px
}
.ba-testimonial__more.open {
	display: block
}
.ba-testimonial__more>:last-child {
	margin-bottom: 0
}

Comments

[szQocks]

https://codepen.io/kapysta-xxl/pen/XWOMYZK

[Айнур Валиев]

а чем он сейчас не плавный?
для скролла используй scrollIntoView

[S3R3BRO]

Айнур Валиев, Сейчас он открывается и закрывается резко, хотелось бы плавности добавить)

[Айнур Валиев]

S3R3BRO, поставил 3s для transition, стало плавнее.

[S3R3BRO]

Айнур Валиев, можешь пожалуйста указать в каком месте добавить transition а так же scrollIntoView?

[Сергей delphinpro]

szQocks, max-height стоит вычислять скриптом по реальной высоте содержимого.

[S3R3BRO]

Сергей delphinpro, Может Вы можете помочь с моим вопросом?

[Сергей delphinpro]

S3R3BRO, да и так дофига решений
https://yandex.ru/search/?text=javascript+spoiler
https://yandex.ru/search/?text=javascript+accordion

[S3R3BRO]

Сергей delphinpro, Я много перелопатил в инете, но что бы я не изменял, у меня потом спойлер вообще не открываться.

[S3R3BRO]

В общем нашел хороший вариант, может кому пригодится.
На barba.js почему-то не хочет работать, если кто сможет разобраться и помочь, буду очень благодарен!

Демо:
https://jsfiddle.net/0czftjm3/2/

<div id="content">
<div class="spoiler">
  Спойлер — это раскрытие интриги, влияющее на восприятие сюжета книги или фильма.
  <div class="spoiler-btn spoiler-btn-top"><span class="show"></span><span class="hide"></span></div>
  <div class="spoiler-body">
      Например, в детективах спойлером является имя убийцы. Чтобы не портить удовольствие от предстоящего чтения или просмотра фильма, текст спойлера прячут, оставляя возможность его просмотреть тем, кто хочет узнать подробности сюжета.
  </div>
  <div class="spoiler-btn spoiler-btn-bottom"><span class="show">Читать далее</span><span class="hide">Свернуть</span></div>
</div>
</div>

.spoiler-btn {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.spoiler-btn:hover {
  color: #e00;
}
.spoiler-btn-bottom {
  width: 100%;
  text-align: left;
}
.spoiler-body {
  display: none;
}
.spoiler .show,
.spoiler.expanded .hide {
  display: inline;
}
.spoiler .hide,
.spoiler.expanded .show {
  display: none;
}
.spoiler.simple .spoiler-btn {
  width: 100%;
}
.spoiler.simple .spoiler-btn-bottom {
  display: none;
}
.spoiler.simple.expanded .spoiler-btn-bottom {
  display: block;
}
#content {
  width: 100%;
}

function toggleSpoilerAnimated(spoilerElement, isInvertedCollapse, isInvertedExpand, duration=500) {
		let spoilerBody = spoilerElement.querySelector('.spoiler-body');
		let isCollapsing = spoilerElement.classList.contains('expanded');
		let heightBefore = spoilerElement.offsetHeight;
		let offsetBefore = window.pageYOffset; 
		spoilerElement.classList.toggle('expanded', !isCollapsing);
		let isScrollRequired = ( isCollapsing && isInvertedCollapse) || (!isCollapsing && isInvertedExpand );
		let scrollFunc = (isScrollRequired)
		? () => {
			let heightNow = spoilerElement.offsetHeight;
			let heightDelta = heightNow - heightBefore;
			window.scrollTo(0, offsetBefore + heightDelta);
		}
		: undefined;
		$(spoilerBody).slideToggle({ duration: duration, progress: scrollFunc, complete: scrollFunc });
	}
	for (let el of document.querySelectorAll('.spoiler-btn-top')) {
		el.addEventListener('click', e => toggleSpoilerAnimated(el.parentNode, true));
	}
	for (let el of document.querySelectorAll('.spoiler-btn-bottom')) {
		el.addEventListener('click', e => toggleSpoilerAnimated(el.parentNode, true));
	}