Код CSS спойлера для сайта
Данный код спойлера является обновлением кода из темы Спойлер для сайта на CSS.
Как и в предыдущей теме, в данной теме мы будем использовать только CSS код. Основными отличиями данного CSS спойлера от предыдущего являются: возможность самостоятельно задавать различный текст в заголовках для каждого спойлера в отдельности, высота спойлера теперь зависит от содержимого, но пришлось пожертвовать плавным открытием.
Для тестирования работы предлагаемых нами спойлеров на CSS, обратите внимание на пару спойлеров, находящихся ниже:
Первый пример, в заголовке которого могут быть как слова "Открыть/Закрыть", так и слова "Показать/Скрыть".
Второй пример, в заголовке которого могут быть как слова "Открыть/Закрыть", так и слова "Показать/Скрыть".
Для получения на своем сайте точно таких же спойлеров на CSS, как в примере, показанном выше, Вам понадобится добавить следующий CSS код:
<style type="text/css">
.spoiler_desc {
background: #333333;
padding: 0 5px;
border-radius: 0 0 5px 5px;
}
.spoiler_desc>p {
cursor: text;
color: #FFFFFF;
margin: 4px;
}
.spoiler_close {
display: none;
position: absolute;
}
.spoiler_open {
display: block;
margin: 5px 0 0 15px;
outline: none;
float: left;
position: relative;
overflow: hidden;
}
.spoiler_close, .spoiler_open {
height: 23px;
width: 240px;
top: 0;
left: 0;
background: #FFFF66;
border-radius: 5px 5px 0 0;
text-indent: 10px;
cursor: default;
border-bottom: 1px dotted #000000;
}
.spoiler_close:hover, .spoiler_open:hover { background: #F5FF27; }
.spoiler_open:focus {
overflow: visible;
background: #333333;
padding: 0;
border-radius: 7px 7px 5px 5px;
border-bottom: none;
}
.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>В результате у Вас должны получиться вполне неплохие спойлеры созданные на CSS без использования JavaScript кода.
В случае если Вам все же хочется сделать плавное открытие и закрытие тела спойлера при помощи CSS, то добавьте внутрь стиля .spoiler_open строчку: transition: height 0.4s ease;, а строчку overflow: visible; замените на height: 105px;. Но, стоит учитывать что в таком случае размер всех раскрытых спойлеров будет одинаков. Именно поэтому мы и отказались от плавного разворачивания и сворачивания спойлера на CSS.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Очень приятно видеть, что у вас получилось это сделать.
В старом коде таким же образом можно сделать размер спойлера по содержимому.
Большое спасибо за исходники - спойлер действительно симпатичный!
Один только вопрос: хочу добавить под спойлер область Input текста - влазит всё хорошо, но: разворачиваю спойлер и нажимаю на Input область, как он сразу же закрывается; что-то поковырял css, не помогло :(
Не подскажите, какой код может помочь в решении?
Заранее большое спасибо!
Но, аналогичная проблема, что и у "Ivan", кликая на ссылку в спойлере, он закрывается. Не имею никакого представления как бы сделать что бы заработало.