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

В общем нашел хороший вариант, может кому пригодится.
На 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));
	}

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

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

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

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

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

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

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

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

SVG filter сильно нагружает процессор и тормозит жутко сайт, в чем может быть проблема?

Ankhena, Этот вариант не подходит, нужно именно svg, так как при переходе на другую страницу происходит анимация смены цвета