спойлер на css

by strange_atom

HTML

<div>
        <input id="inp" class="spoiler_controler" type="checkbox">
        <label for="inp">
            <span class="show">Показать</span>
            <span class="hide">Скрыть</span>
        </label>
        <div class="content">
            Варкалось. Хливкие шорьки<br>
            Пырялись по наве,<br>
            И хрюкотали зелюки,<br>
            Как мюмзики в мове.
        </div>
</div>

CSS

.show,
.hide {
    border-bottom: 1px dashed;
    cursor: pointer;
}

.hide,
.content {
    display: none;
}

.spoiler_controler {
    display: none;
}

.spoiler_controler:checked + label .show {
    display: none;
}

.spoiler_controler:checked + label .hide {
    display: inline;
}
.spoiler_controler:checked ~ .content {
    display: block;
}