Css спойлер: Спойлер | WebReference - Блог сумасшедшего сисадмина

Содержание

Cпойлер средствами css… / Хабр

Defff 26 января 2013 в 03:13

Разработка веб-сайтов *CSS *HTML *

Tutorial

В предпраздничные дни выдалась минутка, захотелось отвлечься — окунуться в мир занятных идей, отстранясь от забот праздника. В итоге, — идея: не ожидая пришествия html5, — смастерить спойлер «по клику» посредством css и HTML.

Ранее в инете делались попытки реализовать подобное через псевдоклассы, — в основном через :focus, что вело к самоскрытию контейнера, при потере фокуса.
Основа данной конструкции — псевдокласс :checked

Минималистически идея выглядит так:

     /* CSS */
.spoiler >  input + .box {
	display: none;
}
.spoiler >  input:checked + .box {
	display: block;
}

<!--// HTML //-->
<div>
     <input type="checkbox" >
     <div>
           Текст сообщения в спойлере.  
     </div>
</div>

Как видим получился кроссбраузерный код, начиная с ИЕ9, где уже есть псевдокласс «:checked» и кончая актуальными версиями остальных браузеров. Cогласно замыслу, — это «чистая» html-css реализация.

При попытках расширить действие на ИЕ6-8, (тут, как обычно для ие,- «чистота» реализации теряется), и мы подключаем гугловскую библиотеку псевдоклассов для ИЕ:

<!-- Compliance patch for Microsoft browsers -->
 <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]-->

Под катом итоговый код «танцев c кроссбраузерностью» *тестировалось в ХP, Win7-8*

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Cпойлер средствами css</title>
<style>
.spoiler >  input + .box > blockquote{
	display: none;
}
. spoiler >  input:checked + .box > blockquote {
	display: block;
}
.spoiler >  input[type="checkbox"] {
	cursor: pointer;
	border-color:transparent!important;
	border-style:none!important;
	background:transparent none!important;
	position:relative;z-index:1;
	margin:-10px 0 -30px -230px;
 }
.spoiler >  input[type="checkbox"]:focus {
	outline:none;	/* Убираем обводку в ИЕ8 при "фокусе" */
}
.spoiler span.close,
.spoiler span.open{
	padding-left:22px;
	color: #00f!important;
	text-decoration: underline;
}
.spoiler >  input +  .box > span.close {
	display: none;
}
.spoiler >  input:checked +  .box > span.close {
	background: url(http://st0.bbcorp.ru/img/minus.png) 4px 60% no-repeat;
	display: inline;
}
.spoiler >  input:checked  + .box > span.open {
	display: none;
}
.spoiler >  input +  .box >  span.open {
	background: url(http://st0.bbcorp.ru/img/plus.png) 4px  60% no-repeat;
	display: inline;
}
.spoiler blockquote,
.spoiler{
    padding:1em;
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    -ms-border-radius:15px;
}
.   spoiler {
    overflow-x:hidden;
    box-shadow: 0px 3px 8px #808080;
    border:#E5E5E5 solid 2px;
    -webkit-box-shadow:0px 3px 8px #808080;
    -khtml-box-shadow:0px 3px 8px #808080;
    -moz-box-shadow:0px 3px 8px #808080;
    -ms-box-shadow:0px 3px 8px #808080;
}
.spoiler blockquote {
   margin-top:12px;
   min-height: 23px;
   border:#CDCDCD 2px dashed;
}
</style>
<!-- Compliance patch for Microsoft browsers -->
 <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]-->
</head>
<body>
           <div>
<div>
<!--* Добавлен tabindex="-1" для снятия фокуса при переходе по "tab" -->
<input type="checkbox" tabindex="-1" >
     <div>
         <span class=close>Скрыть</span><span class=open>Показать</span>
         <blockquote>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
         </blockquote>
     </div>
 </div>
          </div>
</body>
</html>

Минусы:

В ИЕ8 — ~~наличествует пунктирная обводка чекит-бокса при фокусе;~~

// fixed (подсказка от fcunited )
в ИЕ6-7 — чекит панель «винтажно» выдвинута левее спойлера; (Но мы и не ставили себе задачу поддержку данных Ие в изначальных замыслах.

DEMO

PS: Код позволяет просматривать контент спойлера при отключённом java-script, — что востребовано при серфе со старых мобильников, анонимайзеров или с жестко-настроенных фаерволов.

Хочу выразить признательность Octane с

javascript.ru

форума и devote, без которых идея не могла быть реализованной.

Теги:

Cпойлер
css
html

Хабы:

Разработка веб-сайтов
CSS
HTML

Всего голосов 60: ↑39 и ↓21 +18

Просмотры

106K

Комментарии 65

@Defff

Пользователь

Комментарии Комментарии 65

Спойлер для сайта на CSS

UsefulScript.ruСкриптыРазныеСпойлер для сайта на CSS

105

293

Ранее мы уже рассмотрели два способа, позволяющих Вам создать на своем сайте спойлеры для показа и скрытия объемных материалов: Создаем свой собственный спойлер для сайта

и Собственный спойлер с плавным открытием и скрытием содержимого.

Теперь мы хотим предложить Вам еще один вариант создания спойлера, основным отличием которого от рассмотренных ранее является использование только CSS. Напомним, что в двух предыдущих способах необходимо было подключать внешнюю библиотеку jQuery.

Для наглядного примера работы предлагаемого нами скрипта спойлера на CSS, обратите внимание на пару спойлеров, находящихся ниже:

Нужно знать, как и что делать, чтобы текст появился под спойлером, а в заголовке спойлера было «Открыть-Закрыть».

Закрыть

Для получения точно таких же спойлеров на CSS, как в примере, показанном выше, для начала необходимо добавить CSS код:

HTML код:

<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>

Далее, в том месте Вашей странички, где Вы планируете использовать спойлеры, необходимо добавить код этих спойлеров:

HTML код:

<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></div>.

Как видите, вполне неплохие спойлеры можно создавать и на CSS без использования JavaScript кода, что позволяет значительно увеличить скорость загрузки сайта, т.к. не приходится подгружать библиотеку jQuery.

Дата создания: 20:43:58 27.03.2013 г.

Дата обновления: 20:15:33 25.10.2014 г.

Посещений: 29366 раз(а).

CSSскрипт спойлераспойлерспойлер для сайта

Закрыть

Ваше имя:

636 + 16 =

Добавить комментарий:

Ваше имя:

636 + 16 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Только CSS и HTML выпадающий спойлер

спросил 4 года 11 месяцев назад

Изменено 4 года, 11 месяцев назад

Просмотрено 4к раз

Я пытаюсь создать раскрывающийся спойлер CSS и HTML с открытой анимацией.

Я начал с этого jsfiddle но margin-top:-100%; работает не очень хорошо.

 margin-top:-100%;

Любое решение для гладкого анимированного выпадающего контейнера?

HTML
CSS
раскрывающийся список

У вас ошибка в CSS. Вы указали .spoiler > div для показать состояние и только . spoiler для скрыть состояние . Вы должны указать одно и то же для обоих, и анимация будет работать гладко.

 .spoilerbutton {
    дисплей:блок;
    поле: 5px 0;
}
.спойлер {
    переполнение: скрыто;
    фон: #f5f5f5;
}
.спойлер > раздел {
    -webkit-transition: все 0.2s проще;
    -moz-transition: маржа 0.2s легкость;
    -o-transition: все 0,2 секунды облегчены;
    переход: маржа 0,2 с легкость;
}
.spoilerbutton[value="Показать"] + .spoiler > div {
    маржа-верх:-100%;
}
.spoilerbutton[value="Скрыть"] + .spoiler > div {
    отступ: 5px;
}

 <тип ввода = "кнопка" значение = "Показать">
<дел><дел>
ПОМЕСТИТЕ КОНТЕНТ, КОТОРЫЙ ХОТИТЕ СКРЫТЬ ЗДЕСЬ
    ПОМЕСТИТЕ КОНТЕНТ, КОТОРЫЙ ХОТИТЕ СКРЫТЬ ЗДЕСЬ
    ПОМЕСТИТЕ КОНТЕНТ, КОТОРЫЙ ХОТИТЕ СКРЫТЬ ЗДЕСЬ
    ПОМЕСТИТЕ КОНТЕНТ, КОТОРЫЙ ХОТИТЕ СКРЫТЬ ЗДЕСЬ
    ПОМЕСТИТЕ КОНТЕНТ, КОТОРЫЙ ХОТИТЕ СКРЫТЬ ЗДЕСЬ
    ПОМЕСТИТЕ КОНТЕНТ, КОТОРЫЙ ХОТИТЕ СКРЫТЬ ЗДЕСЬ

Кстати, вы также можете анимировать max-height вместо margin вот так:

Css спойлер: Спойлер | WebReference

Cпойлер средствами css… / Хабр

Минималистически идея выглядит так:

Спойлер для сайта на CSS

Только CSS и HTML выпадающий спойлер

Зарегистрируйтесь или войдите

Опубликовать как гость

Опубликовать как гость

Индивидуальный спойлер CSS без javascript

Добавить комментарий Отменить ответ

Рубрики

Рубрики