Идеальный спойлер для сайта на чистом CSS3 + HTML

О чем материал ?

В данной статье мы рассмотрим вариант хорошего спойлера для вашего сайта, где не нужно использовать java script или query, только css и html и все идеально работает.

Часто приходится использовать разные варианты спойлеров и на java script и на query, но мы нашли лучший вариант, не нужно использовать скрипты, достаточно использовать css и html код для установки спойлера. Спойлер работает идеально, можно доработать и оформить как вам захочется и не зависеть от js, который будет нагружать вам сайт.

Как установить спойлер ?

Достаточно в материале на сайте использовать такой код:

<div class="spoiler">
<input type="checkbox" id="spoilerid_1"><label for="spoilerid_1">
Заголовок
</label><div class="spoiler_body">
Скрываемый текст
</div></div>

Установить стили для работы спойлера

.spoiler > input + label:after{content: "+";float: right;font-family: monospace;font-weight: bold;}
.spoiler > input:checked + label:after{content: "-";float: right;font-family: monospace;font-weight: bold;}
.spoiler > input{display:none;}
.spoiler > input + label , .spoiler > .spoiler_body{background:#CCC;padding:5px 15px;overflow:hidden;width:100%;box-sizing: border-box;display: block;}
.spoiler > input + label + .spoiler_body{display:none;}
.spoiler > input:checked + label + .spoiler_body{display: block;}
.spoiler > .spoiler_body{background: #FFF;border: 3px solid #CCC;border-top: none;}

Как оформили стили для этого спойлера мы ?

.spoiler > input + label:before{font:normal normal normal 20px/1 FontAwesome;float:left;margin-right:5px;content: "\f03e";position:relative;top: 5px;}
.spoiler > input + label:after{font:normal normal normal 20px/1 FontAwesome;float:right;margin-right:5px;content: "\f196";position:relative;top: 6px;}
.spoiler > input:checked + label:after{font:normal normal normal 20px/1 FontAwesome;float:right;margin-right:5px;content: "\f147";position:relative;top: 6px;}
.spoiler > input + label span{border-bottom:1px dashed #6da3bd}
.spoiler > input + label,.spoiler > .spoiler_body{padding:5px 15px;font-weight:400;overflow:hidden;width:100%;box-sizing:border-box;display:block;line-height:30px;box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 3px 4px -3px rgba(0,0,0,0.3);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 3px 4px -3px rgba(0,0,0,0.3);-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 3px 4px -3px rgba(0,0,0,0.3);-khtml-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 3px 4px -3px rgba(0,0,0,0.3);text-shadow:#fff 0 1px 0;border-radius:2px;cursor:pointer;background:#FFF;}
.spoiler_body1{padding:5px 0;width:100%;box-sizing:border-box;display:block;line-height:30px;box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 3px 4px -3px rgba(0,0,0,0.3);-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 3px 4px -3px rgba(0,0,0,0.3);-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 3px 4px -3px rgba(0,0,0,0.3);-khtml-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 3px 4px -3px rgba(0,0,0,0.3);border-radius:2px;cursor:pointer;background:#FFF}
.spoiler > input,.spoiler > input + label + .spoiler_body,.spoiler > input + label + .spoiler_body1{display:none}
.spoiler > input:checked + label + .spoiler_body,.spoiler > input:checked + label + .spoiler_body1{display:block}
.spoiler > .spoiler_body{background:#FFF;border:3px solid #CCC;border-top:none}
.spoiler > .spoiler_body1{background:#FFF;border-top:none}

Пример работы спойлера

Вот как работает этот спойлер. Это с нашей доработкой и нашими стилями:

Примечание

Как видите в нашем примере слайдера используется FontAwesome. Мы настроили спойлер красиво с отображением иконок и в дополнение добавили адаптивности, в результате спойлер идеальный для нас. Использовать его или нет зависит от вас.

Важно запомнить! Если вы на одной странице используете несколько спойлеров с нашей инструкции, важно в части spoilerid_1 чтобы у вас вместо цифры 1 был разный айди для всех доп спойлеров. Если у двух спойлеров будет одинаковый айди, при нажатии на один будет и второй открываться.