Спойлер для сайта на CSS
Ранее мы уже рассмотрели два способа, позволяющих Вам создать на своем сайте спойлеры для показа и скрытия объемных материалов: Создаем свой собственный спойлер для сайта и Собственный спойлер с плавным открытием и скрытием содержимого.
Теперь мы хотим предложить Вам еще один вариант создания спойлера, основным отличием которого от рассмотренных
ранее является использование только CSS. Напомним, что в двух предыдущих способах необходимо было
подключать внешнюю библиотеку jQuery.
Для наглядного примера работы предлагаемого нами скрипта спойлера на CSS, обратите внимание на пару спойлеров, находящихся ниже:
Нужно знать, как и что делать, чтобы текст появился под спойлером, а в заголовке спойлера было "Открыть-Закрыть".
Нужно знать, как и что делать, чтобы текст появился под спойлером, а в заголовке спойлера было "Открыть-Закрыть".
Для получения точно таких же спойлеров на CSS, как в примере, показанном выше, для начала необходимо добавить CSS код:
<style type="text/css">
.spoiler_desc {
background: #333333;
padding: 0 5px;
border-radius: 0 0 5px 5px;
margin-top: 22px;
}
.spoiler_desc p {
cursor: text;
color: #FFFFFF;
}
.spoiler_close {
display: none;
width: 100%;
height: 22px;
background: #FFFF66;
border-radius: 5px 5px 0 0;
text-indent: 10px;
cursor: default;
border-bottom: 1px dotted #000000;
position: absolute;
top: 0;
left: 0;
}
.spoiler_close:hover { background: #F5FF27; }
.spoiler_open:before {
content: 'Открыть';
border-bottom: 1px dotted #000000;
cursor: default;
text-indent: 10px;
border-radius: 5px 5px 0 0;
width: 100%;
height: 22px;
background: #FFFF66;
display: block;
position: absolute;
top: 0;
left: 0;
}
.spoiler_open:hover:before { background: #F5FF27; }
.spoiler_open {
margin: 5px 0 0 15px;
height: 23px;
width: 240px;
outline: none;
float: left;
position: relative;
overflow: hidden;
-webkit-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-ms-transition: height 0.3s ease;
-o-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.spoiler_open:focus { height: 122px; }
.spoiler_open:focus .spoiler_close { display: block; }
.spoiler_open:focus:before { display: none; }
</style>Далее, в том месте Вашей странички, где Вы планируете использовать спойлеры, необходимо добавить код этих спойлеров:
<div class="spoiler_open" tabindex="1">
<div class="spoiler_desc">
<p>Нужно знать, как и что делать, чтобы текст появился под спойлером,
а в заголовке спойлера было "Открыть-Закрыть".</p>
</div>
<span tabindex="0" class="spoiler_close">Закрыть</span>
</div>
<div class="spoiler_open" tabindex="2">
<div class="spoiler_desc">
<p>Нужно знать, как и что делать, чтобы текст появился под спойлером,
а в заголовке спойлера было "Открыть-Закрыть".</p>
</div>
<span tabindex="0" class="spoiler_close">Закрыть</span>
</div>Если Вам необходимо сделать спойлеры, высота которых будет подстраиваться по содержимому, то стиль .spoiler_open:focus { height: 122px; } замените на .spoiler_open:focus { height: auto; }. Но, в таком случае пропадет эффект плавного открытия.
Если Вы не хотите оставлять под спойлерами пустое пространство, и чтобы текст не обтекал спойлер справа, то добавьте после спойлеров <div style="clear:both;"></div>.
Как видите, вполне неплохие спойлеры можно создавать и на CSS без использования JavaScript кода, что позволяет значительно увеличить скорость загрузки сайта, т.к. не приходится подгружать библиотеку jQuery.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
1. Вместо Открыть - квадратики, Закрыть - нормально отображается.
2. Верхняя строчка текста под спойлером наполовину закрывает сам спойлер.
3. Черный фон под спойлером не наблюдается.
4. Исходит из 3. Светлый текст на светлом фоне практически не виден.
Подскажите, пожалуйста, как поправить?
2. Тут надо менять отступы в CSS части, т.к. у Вас на сайте наверняка другой шрифт, либо его размер и т.д.
3. Не знаю, что и предположить, возможно, где-то пересеклись стили.
Можно классы и анимацию в CSS прописать, а вот ставить их уже через JS. Это просто сделать и без jQ.
Хотелось бы подробнее узнать про механизм работы данного спойлера. На сколько я понял все базируется на tabindex т.к. без него ничего не работает. Но никак не пойму, почему теряется фокус при нажатии на кнопку закрыть, она ведь находится в блоке, который в фокусе.