show block if checkbox commands

by Alexander Zonov

HTML

<div class="form-row form-checkbox-set" data-hasqtip="12">
  <label>
    <input type="checkbox" name="select-all-contracts" checked="checked" data-js-m="select-all-checkboxes" data-js-m-select-all-checkboxes="{&quot;targetName&quot;: &quot;contract-ids&quot;}" class="form-checkbox field-check checked-pseudo-class js-mod" id="tsde-6" data-hasqtip="7"><span class="form-checkable-label">Für alle Verträge übernehmen.</span>
  </label>
</div>

<div class="two-state-container">
  <label><input type="checkbox" class="tsc__switcher"/>Переключить</label>
  <div class="tsc__holder">
    <div class="tsc__checked">
      <div class="block red">
        Раз
      </div>
    </div>
    <div class="tsc__unchecked">
      <div class="block blue">
        Два
      </div>
    </div>
  </div>
</div>

CSS

.two-state-container .form-checkbox-set label .tsc__switcher ~ .tsc__holder .tsc__unchecked {
  display: block;
}

.two-state-container .form-checkbox-set label .tsc__switcher:checked ~ .tsc__holder .tsc__unchecked {
  display: none;
}

.two-state-container .form-checkbox-set label .tsc__switcher ~ .tsc__holder .tsc__checked {
  display: none;
}

.two-state-container .form-checkbox-set label .tsc__switcher:checked ~ .tsc__holder .tsc__checked {
  display: block;
}

.block {
  width: 100px;
  height: 100px;
}

.red {
  background-color: rgba(255,	36,	0, 0.5);
}

.blue {
  background-color: rgba(0, 0, 255, 0.5);
}