Простой и красивый спойлер на 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>