Как открывать только тело блока по которому кликнули?

Question

[rasimzes]

Надо подкорректировать код, чтобы при клике на data-class="flat-head" раскрывалось тело блока по которому был совершен клик, а не всех как сейчас.

codepen

Answer 1

[Alexander Chuvilin]

Вместо
$flatBody.toggleClass("d-block");

Укажите

$(this).siblings('[data-class=flat-body]').toggleClass('d-block');

Comments

[rasimzes]

Уважаемый, великолепно работает, спасибо!
А не подскажите как бы сделать, чтобы при раскрытии нового "тела", предыдущее закрывалось?

UPD: добавил $flatBody.hide(); вроде, то, что надо

[Alexander Chuvilin]

rasimzes, тогда ваш код изменится чуть больше:

$(document).ready(function () {
  let $flatHead = $('[data-class=flat-head]');
  let $openedBody = null;

  $flatHead.click(function () {
    
    if ($openedBody) {
      $openedBody.removeClass('d-block');
    }
    
    $openedBody = $(this).siblings('[data-class=flat-body]');
    $openedBody.addClass('d-block');
  });
});

UPD: добавил $flatBody.hide(); вроде, то, что надо

$flatBody.hide(); будет "дергать" сразу все блоки с data-class="flat-body" в дереве DOM, что не очень рационально.