\раскр блоки

by Nat_Lilit

HTML

<div class="demo">
  <input type="checkbox" id="hd-1" class="hide" />
  <label for="hd-1">CТРАТЕГИЯ</label>
  <div>CТРАТЕГИЯCТРАТЕГИЯCТРАТЕГИЯCТРАТЕГИЯCТРАТЕГИЯCТРАТЕГИЯ </div>
  <input type="checkbox" id="hd-2" class="hide" />
  <label for="hd-2">ЛОГИСТИКА</label>
  <div>ЛОГИСТИКАЛОГИСТИКАЛОГИСТИКАЛОГИСТИКАЛОГИСТИКАЛОГИСТИКА
  </div>

<input type="checkbox" id="hd-3" class="hide" />
<label for="hd-3">ТАКТИКА</label>
<div>ТАКТИКАТАКТИКАТАКТИКАТАКТИКАТАКТИКАТАКТИКАТАКТИКА
</div>

<input type="checkbox" id="hd-4" class="hide" />
<label for="hd-4">ТЕХНИКА</label>
<div>ТЕХНИКАТЕХНИКАТЕХНИКАТЕХНИКАТЕХНИКАТЕХНИКАТЕХНИКАТЕХНИКАТЕХНИКА
</div>

<input type="checkbox" id="hd-5" class="hide" />
<label for="hd-5">ТЕХНОЛОГИЯ</label>
<div>ТЕХНОЛОГИЯТЕХНОЛОГИЯТЕХНОЛОГИЯТЕХНОЛОГИЯТЕХНОЛОГИЯТЕХНОЛОГИЯТЕХНОЛОГИЯТЕХНОЛОГИЯ
</div>
</div>

CSS

/* скрываем чекбоксы и блоки с содержанием */
.hide {
  display: none;
}
.hide + label ~ div {
  display: none;
}
/* оформляем текст label */
.hide + label {
  border-bottom: 1px dotted green;
  padding: 0;
  color: black;
  cursor: pointer;
  display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
  color: gray;
  border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
  display: inline-block;
  float: left;
  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;
}
/* demo контейнер */
.demo {
  display: table-cell;
}