Самый простой способ повторить этот поток решений

Question

Я хочу повторить поток решений, найденный здесь: https://codepen.io/jason-monaghan/pen/bGbQVwM

Я бы хотел, чтобы там было две кнопки. Когда нажата одна, раздел расширяется еще двумя кнопками.в некоторых разделах вместо кнопок будет текст.

Я прикрепил созданный мной поток пользователя.

Поток пользователя

Я пытался использовать переключателькнопки, но обнаружена проблема при нажатии обеих кнопок:

$(document).ready(function() {
  $('.button').click(function() {
    $(this).siblings(".item").toggle();
  });
});
$(document).ready(function() {
  $('.button-1').click(function() {
    $(this).siblings(".item-1").toggle();
  });
});

.item,
.item-1 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="button">Yes</button>
  <button class="button-1">No</button>
  <div class="item-1">
    Not eligible
  </div>
  <div class="item">
    <div class="item-2">
      <p>Eligible</p>
      <button class="button-3">Click</button> <button class="button-4">Click</button>
    </div>
  </div>
</div>

Спасибо

Answer 1

Вы не переключаете ранее выбранный элемент.Вы должны сделать что-то вроде:

$(this).siblings(".item-1").hide();
$(this).siblings(".item").show();

, когда вы нажимаете одну кнопку.Или отключите другую кнопку, чтобы ее нельзя было нажать.