Простые спойлеры Jquery

by beliyadm

HTML

<div class="spoiler_item">
	<h4>Заголовок спойлера</h4>
	<div class="text">Текст спойлера</div>
</div>

<div class="spoiler_item">
	<h4>Заголовок спойлера 2</h4>
	<div class="text">Текст спойлера</div>
</div>

<div class="spoiler_item">
	<h4>Заголовок спойлера 3</h4>
	<div class="text">Текст спойлера</div>
</div>

<div class="spoiler_item">
	<h4>Заголовок спойлера 4</h4>
	<div class="text">Текст спойлера</div>
</div>

CSS

.spoiler_item {
  margin: 20px 0;
}

.spoiler_item .text {
  display: none;
  border: 1px solid red;
  padding: 20px;
}

.spoiler_item h4 {
  display: block;
  position: relative;
  padding: 0 0 0 20px;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  cursor: pointer;
}

.spoiler_item h4:after {
  position: absolute;
  left: 0px;
  top: 0;
  content: '\2193';
}

.spoiler_item.active h4:after {
  content: '\2191';
}

.spoiler_item.active h4 {
  color: red;
}

JavaScript

$('.spoiler_item h4').on('click', function(e) {
		e.preventDefault();
    var thisSpoilerItem = $(this).parent();
    thisSpoilerItem.toggleClass('active');
		thisSpoilerItem.find('.text').fadeToggle();
	});