имеется код css и верстка. таких блоков-строк несколько. Я хотел бы не привязываться к id а сворачивать разворачивать блок ближайший к чекбоксу. Как можно переписать css чтобы работало без привязки к id?

  * { box-sizing: border-box; }
        body { background-color: #fff; font-family: Consolas, Tahoma, Verdana, sans-serif; color: #3a3a3a; font-size: 14px; padding: 30px; }
		h1 { font-size: 18px; padding: 0; margin: 5px 0 20px 0; }
		h2 { font-size: 14px; padding: 0; margin: 5px 0 5px 0; }
        /* псевдоэлемент, отменяет выделение текста стилями при быстрых кликах */
        .toggler_label::selection { color: none; background: none; }
        .toggler { padding: 2px; }
        /* Стили для заголовка блока, при нажатии на который появляется дополнительный блок */
        .toggler_label { display: block; cursor: pointer; border: 1px solid #efefef; padding: 1px 5px 1px 5px; }
        /* скрытый блок позиционируется абсолютно, чтобы не оставлять пустое место */
        .toggler_content-box  { position: absolute; transform: translate(9999px); opacity: 0; }
        /* скрываем checkbox */
        .toggler_checkbox { display: none; }
        /* при нажатии на блок label (каждый label через аттрибут for привязан к конкретному чекбоксу посредством уникального id)
        чекбокс меняет свое состояние (но мы этого не видим, так как скрыли его)
        и элемент с классом .toggler__content-box, ближайший к нажатому чекбоксу, плавно выдвигается, отображаяя
        свое содержимое. */
        .toggler_checkbox:checked ~ .toggler_content-box { display: block; position: relative; transition: opacity 0.5s linear; transform:translate(0); opacity: 1; 
margin: 5px 0 10px 0; cursor: pointer; border: 1px solid #ddd; padding: 5px 5px 5px 5px; }

<div class="toggler">
					<input type="checkbox" id="toggler_checkbox-id-1" class="toggler_checkbox">
					<label for="toggler_checkbox-id-1" class="toggler_label">T3 FrRadiusD30.0 </label>
					<span class="toggler_content-box">

Текст

					</span>
				</div>