Красивый спойлер на jQuery

Простой и красивый спойлер на Jquery + css.

HTML

<div class="spoiler-wrap disabled">
  <div class="spoiler-head">Заголовок</div>
  <div class="spoiler-body">Текст</div>
</div>

CSS

.spoiler-wrap{background:#fff;margin: 0 0 8px;border:1px solid #efefef}
.spoiler-head{background:#efefef;cursor:pointer;padding:5px;}
.spoiler-body{padding:10px}
.spoiler-wrap.disabled .spoiler-body{display:none}
.spoiler-wrap.active{border-color:#57AA43}
.spoiler-wrap.active .spoiler-head{background:#57AA43;color:#fff}

Javascript

<script>
jQuery(document).ready(function(){
	jQuery('.spoiler-head').click(function(){
		$(this).parents('.spoiler-wrap').toggleClass("active").find('.spoiler-body').slideToggle();
	})
})
</script>

Либо:

<script>
$(function () {
	$('.spoiler-body').hide(300);
	$(document).on('click','.spoiler-head',function (e) {
		e.preventDefault()
		$(this).parents('.spoiler-wrap').toggleClass("active").find('.spoiler-body').slideToggle();
	})
})
</script>