$('#spoiler-opener a').click(function (e) {
		$('.spoiler').slideToggle(1000);
		$('#spoiler-opener a .fa').toggleClass("opener-open");
		$('#spoiler-opener a .fa').toggleClass("opener-closed");
		//$.scrollTo('.spoiler', 1000);
		e.preventDefault();
	});

	<div class="spoiler">
	<div id="spoiler-opener" class="spoiler-opener">
			<a href="#" ><i class="fa fa-plus opener-open" aria-hidden="true"></i></a>
		</div>
	</div>
	<style>
		.spoiler
		position: relative
		overflow: hidden
		display: none
	.spoiler-opener
		font-size: 30px
		color: #999
		display: block
		text-align: center
		position: relative
		border-bottom: 1px solid $accent
		margin-top: 10px
		a
			display: inline-block
			border: 1px solid $accent
			border-radius: 3px
			padding: 6px 10px
			position: absolute
			top: -23px
			left: calc(50% - 24px)
			background-color: #FFF
			line-height: 1
			color: $accent
			&:hover,
			&:focus,
				text-decoration: none
				color: $accent
			.fa
				font-size: 25px
				width: 25px
				height: 22px
				&.opener-closed
					transition: transform 0.5s;
					transform: rotate(135deg)
				&.opener-open
					transition: transform 0.5s;
					transform: rotate(0deg)
	</style>