HTML Складная кнопка - Как выделить кнопку как href (несколько кнопок)?

Question

Я хотел бы создать складную кнопку, выделенную как href для моего веб-сайта Academi c, и получил ответ здесь: HTML Складная кнопка - Как выделить кнопку как href?

Однако, когда я создаю более одной кнопки, верхняя кнопка открывает все скрытые тексты (см. Мой код ниже). Могу ли я изменить код так, чтобы каждая кнопка открывала только скрытый текст непосредственно под ним или открывала указанный скрытый текст?

CSS:

label {
  color: blue;
}

label:hover {
  text-decoration: underline;
  cursor: pointer; }

#hidden {
  display: none;
}

:checked~#hidden {
  display: block;
}

Html:

<input type="checkbox" id="my_checkbox" style="display:none;">1st paper title.
<label for="my_checkbox">Abstract</label>
<div id="hidden">1st abstract</div>
<br>
<input type="checkbox" id="my_checkbox2" style="display:none;">2nd paper title.
<label for="my_checkbox2">Abstract</label>
<div id="hidden">2nd abstract</div>

Answer 1

Один и тот же идентификатор можно использовать один раз на страницу. Поэтому мы должны использовать class вместо id. Также мы должны использовать соседний братский комбинатор вместо общий братский комбинатор

label {
  color: blue;
}

label:hover {
  text-decoration: underline;
  cursor: pointer; }

.hidden {
  display: none;
}

input:checked+label+.hidden {
  display: block;
}

<input type="checkbox" id="my_checkbox" style="display:none;">1st paper title.
<label for="my_checkbox">Abstract</label>
<div class="hidden">1st abstract</div>
<br>
<input type="checkbox" id="my_checkbox2" style="display:none;">2nd paper title.
<label for="my_checkbox2">Abstract</label>
<div class="hidden">2nd abstract</div>

Answer 2

Да, при условии, что структура HTML является надежной и последовательной.

Изменение:

:checked~#hidden {
  display: block;
}

на

:checked + label + #hidden {
  display: block;
}

Однако вы не можете иметь несколько предметов с одинаковым id attriubte - используйте класс вместо.