Спойлер на CSS, без JavaScript

Drupal: 

Без JS сайты быстрее и надёжнее.
Вот как делать динамический элемент на CSS. По кнопке <label>Кнопка</label> открывается блок .spoiler_body.

  1. .spoiler > input + label:after{content: "+";float: right;font-family: monospace;font-weight: bold;}
  2. .spoiler > input:checked + label:after{content: "-";float: right;font-family: monospace;font-weight: bold;}
  3. .spoiler > input{display:none;}
  4. .spoiler > input + label , .spoiler > .spoiler_body{background:#CCC;padding:5px 15px;overflow:hidden;width:100%;box-sizing: border-box;display: block;}
  5. .spoiler > input + label + .spoiler_body{display:none;}
  6. .spoiler > input:checked + label + .spoiler_body{display: block;}
  7. .spoiler > .spoiler_body{background: #FFF;border: 3px solid #CCC;border-top: none;}
  1. <div class="spoiler">
  2. <input type="checkbox" id="spoilerid_1"><label for="spoilerid_1">
  3. Заголовок
  4. </label><div class="spoiler_body">
  5. Скрываемый текст
  6. </div></div>