Как сделать, что бы код java script (показать еще) сработал только для одного блока?

Question

[Anna-17]

Здравствуйте, мне нужна помощь. При нажатии показать блок все блоки одновременно раскрываются. Но мне нужен, что бы сработал только для одного блока. А остальные, что бы не раскрывались.

<span class="toggle-block">Показать блок</span>
<div class="block" style="display: none;">Содержимое блока</div>

<span class="toggle-block">Показать блок</span>
<div class="block" style="display: none;">Содержимое блока</div>

<span class="toggle-block">Показать блок</span>
<div class="block" style="display: none;">Содержимое блока</div>

<span class="toggle-block">Показать блок</span>
<div class="block" style="display: none;">Содержимое блока</div>

<script type="text/javascript">
jQuery(function($){
$('.toggle-block').click(function() {
	
	if ($('.block').is(':visible')) {
		$('.block').hide('slow');
		$(this).html('Показать блок')
	}
	else {
		$('.block').show('slow');
		$(this).html('Скрыть блок')
	}
});
});
</script>

Answer 1

[GAS-ART]

$('.toggle-block').click(function () {
      $('.toggle-block').not($(this)).removeClass('active');
      $('.toggle-block').not($(this)).next().slideUp(300);
      $(this).toggleClass('active').next().slideToggle(300);
   });

Ну а в CSS на класс 'active' задайте нужные стили (если нужно).

Comments

[Anna-17]

Спасибо!

[Klein Maximus]

Только this лучше не использовать.

$('.toggle-block').click(function (event) {
// event.target ...
});