jQuery показать / скрыть несколько делений

Question

Мне нужна помощь в раскрытии / разворачивании div с использованием jQuery. Вот проблема.

У меня есть страница HTML, показывающая названия автомобилей и их описание, как показано ниже.

1. Когда пользователь нажимает на любой div carTitle, соответствующий div carDetail должен быть расширен (если он уже свернут). Когда пользователь снова нажимает на этот div, соответствующий div carDetail должен быть свернут.

2. Изначально div carToyota должен быть развернут на pageLoad, а другие div свернуты

3. Пользователь может одновременно расширять несколько делений

var collapsed = false;

$(".carTitle").on('click', function(e) {
  collapsed = !collapsed;
  var carDetailsDiv = $(event.currentTarget).next();

  if (collapsed == true) {
    $(carDetailsDiv).hide();
  } else {
    $(carDetailsDiv).show();
  }

  event.preventDefault();
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

Приведенный выше код не работает должным образом. Кто-нибудь может помочь ??

Answer 1

Определите свой собственный класс с именем collapsed и установите для него значение display: none

collapsed {
  display: none;
}

Затем вы можете использовать jQuery s .toggleClass() для переключения этого класс, а также возможность просто добавить класс в carDetails div, чтобы скрыть их по умолчанию

Наконец, вы можете использовать $(this).next() вместо event.currentTarget.next()

---

Вот демо:

$(".carTitle").on('click', function(e) {
  $(this).next().toggleClass('collapsed');
});

.collapsed {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails collapsed">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails collapsed">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

Answer 2

var collapsed = false;

$(".carTitle").on('click', function(e) {
  collapsed = !collapsed;
  var carDetailsDiv = $(event.currentTarget).next();

  $(this).siblings('.carDetails').toggleClass('show');

  event.preventDefault();
  return false;
});

.carDetails {display:none;}
.show {display:block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails show">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

Попробуйте это у меня с помощью класса переключения в вашем описании div ....

Answer 3

По умолчанию все .carDetails div по умолчанию остаются скрытыми.

Сохраняют open класс в первом вагоне Div.

Удалите / добавьте .open класс в carDetails, то есть нажал.

$(".carTitle").on('click', function(e) {
  var carDetailsDiv = $(event.currentTarget).next();
  if ($(carDetailsDiv).hasClass('open')) {
    $(carDetailsDiv).removeClass('open');
  } else {
    $(carDetailsDiv).addClass('open');
  }

  event.preventDefault();
  return false;
});

.carDetails {
  display: none;
}

.carDetails.open {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carItem01_container">
  <div id="carToyota" class="carTitle">
    <div class="carName">Toyote
    </div>
  </div>
  <div id="carToyota_show" class="carDetails open">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem02_container">
  <div id="carMazda" class="carTitle">
    <div class="carName">Mazda
    </div>
  </div>
  <div id="carMazda_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>

<div id="carItem03_container">
  <div id="carVolvo" class="carTitle">
    <div class="carName">Volvo
    </div>
  </div>
  <div id="carVolvo_show" class="carDetails">
    <div class="carDescription"> ...
    </div>
  </div>
</div>