Скрыть блок div через css

/*хватаем элемент order*/ 
const order = document.getElementsByClassName('order'); 
/*хватаем элемент order_item*/ 
const order_item = document.getElementsByClassName('order_item'); 
 
/* и тут прокручиваем в цикле order*/ 
for (let i = 0; i < order.length; i++) { 
  // и тут событие срабатывает  которое добавляет и удаляет класс 
  order[i].addEventListener('click', function() { 
    order_item[i].classList.toggle('active'); 
  }) 
}

.order_item { 
  opacity: 0; 
  transition: opacity .3s; 
} 
 
.order_item.active { 
  opacity: 1; 
  transition: opacity .3s; 
}

<div class="order" id="order1"> Текст для показа 
  <div class="order_item" id="order_item1">Текст который надо скрыть</div> 
</div> 
 
<div class="order" id="order2"> Текст для показа 
  <div class="order_item" id="order_item2">Текст который надо скрыть</div> 
</div>

/* скрываем чекбоксы и блоки с содержанием */ 
 
.hide, 
.hide+label~div { 
  display: none; 
} 
 
 
/* вид текста label */ 
 
.hide+label, 
.hide:checked+label { 
  padding: 0; 
  color: green; 
  cursor: pointer; 
  border-bottom: 1px dotted green; 
} 
 
 
/* вид текста label при активном переключателе */ 
 
.hide:checked+label { 
  color: red; 
  border-bottom: 0; 
} 
 
 
/* когда чекбокс активен показываем блоки с содержанием  */ 
 
.hide:checked+label+div { 
  display: block; 
  background: #efefef; 
  -moz-box-shadow: inset 3px 3px 10px #7d8e8f; 
  -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; 
  box-shadow: inset 3px 3px 10px #7d8e8f; 
  padding: 10px; 
}

<input class="hide" id="hd-1" type="checkbox"> 
<label for="hd-1">Нажмите здесь, чтобы открыть!</label> 
<div>Скрытое содержание......</div> 
<input class="hide" id="hd-2" type="checkbox"> 
<label for="hd-2">Нажмите здесь, чтобы прочитать больше!</label> 
<div>Скрытое содержание...</div>