Как сделать чтобы по клику показывались/скрывались блоки?

Question

[Владимир]

Добрый день .Имеется несколько одинаковых блоков Но по клику окрываюся все блоки. А нужно чтобы по клику на определенный блок открывался/скрывался не все блоки а только блок по которому кликнули.
код который есть по ссылке в песочнице. как его подправить или лучше другой.

Comments

[Одиночка Айс]

обрабатывайте каждый клик по отдельности через .each(), не забывая при этом скрывать (если нужно) все остальные блоки

[Антон]

Одиночка Айс, зачем ич? показываем ивент таргет, т.е. this, и перед скрываем по классу другие.

Answer 1

[fallus]

$(".btn-order-block ").click(function(){
    $(this).parents('.task-block').next('.bet-block').slideToggle(300);
    return false;
});

Comments

[Владимир]

Добрый день. ваш код почти подходит. а как теперь сделать чтобы и кнопка меняло свое состояние только в том блоке на который кликну там в коде есть две кнопки btn-order и btn-order-active по клику на то же блок
btn-order меняется на btn-order-active но во все блоках.

[fallus]

Выше я написал это:

$(this).parents('.task-block').next('.bet-block').slideToggle(300);

$(this) — нажатая кнопка. Именно она.
Если добавить к ней класс:

$(this).addClass('active');
//или
$(this).toggleClass('active') // Класс active вкл. и выкл. соответственно

В целом, вот:

$(".btn-order-block ").click(function(){
  var parent =  $(this).parents('.task-block'); // Это родительский блок нажатой кнопки
  parent.next('.bet-block').slideToggle(300); // Скрываем блок с классом bet-block, который идёт сразу после текущего блока(parent)
  parent.find('.btn-order').addClass('lalala123321'); // Дообавляем класс lalala123321 кнопке с классом btn-order, которая в данном блоке
  parent.find('.btn-order-active').addClass('lalala456654'); // Дообавляем класс lalala456654 кнопке с классом btn-order-active, которая в данном блоке
  return false;
});

По-хорошему, Вам стоит почитать документацию по jQuery.