Как показать скрытый контент внутри div

Question

У меня есть этот код, который работает, но я хочу отображать один div за раз.

Ссылка на мой код находится здесь:

https://codepen.io/danongu/pen/YzXvpoJ

Я не разместил здесь весь код, потому что в нем много html и CSS. У меня проблемы с деталью js.

Чего я надеюсь достичь:

Когда вы нажимаете кнопку Section A Book List, вы должны увидеть только PREVIOUS VERSIONS A и NEW VERSIONS A part.

Нажав кнопку Section B Book List, вы увидите только элементы PREVIOUS VERSIONS B и NEW VERSIONS B.

Для черной области Book 1 и Book 2. Я надеюсь показать часть BOOK 1, когда вы нажимаете Book 1 и BOOK 2, когда вы нажимаете Book 2

Так что там происходит какое-то условное шоу / скрытие. Я пытался написать jquery, но я не смог go дальше, чем попытка в коде.

Пожалуйста, посмотрите. Я сделал небольшую попытку, но застрял по пути.

Answer 1

Вы можете назначить класс или, что лучше, идентификатор для каждой оболочки списка книг разделов, например,

<div id="bbl-wrapper1">
  <button class="toggle1">Section A Book List </button>
  <button class="toggle2">Section B Book List </button>

  <div class="clearfix" id="section-a">...</div>

  <div class="clearfix" id="section-b">...</div>
</div>

, а затем скрыть #section-b по умолчанию:

#section-b {
  display: none;
}

И затем связывайте вещи с jQuery следующим образом:

$(document).ready(function() {
  var $secA = $("#section-a");
  var $secB = $("#section-b");

  $('.toggle1').click(function() {
    $secA.show();
    $secB.hide();
  });

  $('.toggle2').click(function() {
    $secA.hide();
    $secB.show();
  });
});

Вы можете применить те же логи c к BOOK 1 и BOOK2.

PS Идентификатор bbl происходит дважды в вашем html. Значение id должно быть уникальным для каждого элемента.