CSS спойлер, не работает по нажатию

Question

Помогите, пожалуйста, понять, почему не работает спойлер на CSS. Пытался сделать его на чистом HTML/CSS. Указал id input, связывал label с ним - не работает.

.details-section {
  display: none;
  margin-top: 20px;
  border-top: 1px solid #ccc;
  padding-top: 20px;
  width: 100%;
}

.hidden-checkbox:checked+.details+.details-section {
  display: block;
}

.details img {
  transition: transform 0.3s ease;
}

<a href="#" class="btn">Abrir<img src="/arr.png" alt="Arrow"></a>
<input type="checkbox" id="details-toggle" class="hidden-checkbox">
<label class="details" for="details-toggle">
    <span>Detalhes</span>
    <img src="/down_arr.png" alt="Arrow">
</label>
</div>
<div class="details-section">
  <div class="details-content">контент

Главная проблема в том, что при нажатии на кнопку состояние не переходит из none в block и я не понимаю почему.

БЛОГ НА HUSL

CSS спойлер, не работает по нажатию

Ответы (0 шт):