Spoler

Spoiler.html

<div>
	<a href="#" class="spoiler-trigger active"><span>Спойлер 1</span></a>
	<div class="spoiler-block" style="display:block;">Открытый контент первого спойлера</div>
</div>

spoiler.js

$(document).on('click', '.spoiler-trigger', function (e) {
        e.preventDefault();
        $(this).toggleClass('active');
        $(this).parent().find('.spoiler-block').first().slideToggle(300);
    });

style.css

.spoiler-trigger{
	color: #0b70db;
	text-decoration: none;
	padding-left: 15px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANUlEQVQoU2PkLrj9n4EAYAQp+jpBlRGXOpA8hiJ0TaQrwuY2kDNINwnmcKLchO5LuHWEwgkAlO5FBwhFaI8AAAAASUVORK5CYII=) no-repeat 0 50%;
}
.spoiler-trigger.active{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKklEQVQoU2PkLrj9n4EAYAQp+jpBlRGXOpA8DRRhcxvIGTSyjqDvCIUTAEcINQcERZkIAAAAAElFTkSuQmCC);
}
.spoiler-trigger>span{
	border-bottom: 1px dashed #0b70db;
	padding:0 3px;
}
.spoiler-trigger:hover>span{
	border-bottom-style: solid;
}
.spoiler-block{
	display: none;
}