Флажок для отображения содержимого без использования только HTML и CSS (без JS)

Question

Я устанавливаю флажок в режиме боковой навигации на моих html-страницах, я хочу, чтобы флажок отображал содержимое при выборе. Пример: установите флажок 1, отображать только содержимое, флажок не установлен, отображать все содержимое. Как я могу сделать это без Jquery / javascript. Я хочу, чтобы моя веб-страница поддерживала ту же функциональность, даже если Javascript в браузере отключен. Могу ли я сделать это, включив w3.css, так как эти стили реагируют без использования начальной загрузки

Answer 1

Я бы посоветовал вам изучить селектор ": checked". Вот простой пример.

HTML

<label for="trigger">Toggle box</label>
<div>
    OTHER HTML CONTENT
</div>
<input id="trigger" type="checkbox">
<div class="box">
  SHOW / HIDE BOX
</div>

CSS

.box {
  display: none;
  background: #ccc;
  width: 200px;
  height: 100px;
}

#trigger {
  display: none;
}

#trigger:checked + .box {
  display: block;
}

Как видите, селектор «: флажок» может показывать или скрывать блок DIV. Вот интересная статья на эту тему.

Answer 2

Ниже код имеет id для разных checkbox, а для contents, клик по любому checkbox, содержимое которого будет отображаться:

#content {
  display: none;
}

#show:checked ~ #content {
  display: block;
 }
  
#content1 {
  display: none;
}

#show1:checked ~ #content1 {
  display: block;
  }

<input type="checkbox" id="show">
<label for="show">check1</label>|
<input type="checkbox"id="show1">
<label for="show1">check2</label>


<span id="content">jvdkvdkvjdl</span>

 

<span id="content1">dkjvvhjvhkjdklhdlvk</span>