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

В предпраздничные дни выдалась минутка, захотелось отвлечься — окунуться в мир занятных идей, отстранясь от забот праздника. В итоге, — идея: не ожидая пришествия 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, без которых идея не могла быть реализованной.

habr.com

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

102

289

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

Теперь же мы хотим предложить Вам еще один Вариант создания спойлера, основным отличием которого от рассмотренных
ранее является использование только 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: 0px;
    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: 0px;
    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 г.

Посещений темы: 26319 раз(а).

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

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

usefulscript.ru

Спойлер для сайта | Step For Top

Спойлер — это скрытая информация на сайте (текст, изображение и т.д.), которая открывается на странице после нажатия на кнопку или ссылку

А это содержимое спойлера. Тут может быть все, что угодно. Используйте любые HTML-теги.


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

Чтобы сделать такой спойлер у себя на сайте, используйте этот код:

<script>

function spoiler()
{
if(document.getElementById(‘spoiler’).style.display == ‘none’){
document.getElementById(‘spoiler’).style.display = ‘block’;
}else{
document.getElementById(‘spoiler’).style.display = ‘none’;
}
}

</script>

<input type=»button» value=»Нажми меня»>
<p><br></p>

<div>

А это содержимое спойлера. Тут может быть все, что угодно. Используйте любые HTML-теги.
<hr>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<script>

  

  function spoiler()

{

if(document.getElementById(‘spoiler’).style.display == ‘none’){

document.getElementById(‘spoiler’).style.display = ‘block’;

}else{

document.getElementById(‘spoiler’).style.display = ‘none’;

}

}

  

</script>

  

  <input type=»button» value=»Нажми меня»>

  <p><br></p>

  

  <div>

  

  А это содержимое спойлера. Тут может быть все, что угодно. Используйте любые HTML-теги.

  <hr>

  </div>

Данный код можно вcтавить на любую HTML сраницу в то место, где нужен спойлер. Содержимое спойлера может быть любое на Ваше усмотрение.
Также этот спойлер можно вставлять и в шаблоны сайта uCoz, а в самом содержимом использовать системные переменные Ucoz.

Несколько спойлеров на одной странице

Если на одной страницы нужно установить несколько таких спойлеров, тогда этот код Вы вставляете несколько раз. НО!!! В этом коде установлена функция, которой дано имя spoiler. В следующем коде который Вы будете ставить на той же странице слово spoiler в коде Вам нужно заменить на любое другое. Если третий раз — опять новое слово. Слово spoiler в коде встречается 6 раз!!! Будьте внимательны.

Редактирование кнопки спойлера

Сама кнопка это следующая строка. Чтобы отредактировать кнопку — нужно вносить изменения именно в эту строку:

<input type=»button» value=»Нажми меня»>

<input type=»button» value=»Нажми меня»>

Тег <input> применяется для создания различных кнопок, флажков, переключателей и полей для заполнения (форм). У этого тега очень много атрибутов, но для редактирования нашей кнопки мы рассмотрим лишь некоторые.
Атрибут type — в нашем случае только два варианта:
— button — простая кнопка;
— image — кнопка изображение. Применяя этот атрибут не забудьте добавить атрибут src и путь к файлу картинке.

<input type=»image» src=»путь_к_картинке» value=»Нажми меня»>

<input type=»image» src=»путь_к_картинке» value=»Нажми меня»>

Атрибут value — в данном случае текст Вашей кнопки, чтобы его изменить просто введите другой текст;
Атрибут style — можно применить для изменения цвета кнопки и цвета шрифта. За цвет кнопки будет отвечать background, а за текст шрифта color.

<input type=»button» value=»Нажми меня»>

<input type=»button» value=»Нажми меня»>

И в итоге у Вас может быть такая цветная кнопка:


Также существует еще много вариантов установки спойлера на сайт. Один из них — спойлер с плавным открытием и закрытием.



Статьи по теме:

stepfor.top

Простой спойлер на HTML и CSS

Простой спойлер на чистом HTML и CSS. Логика работы неявна – но работает, хотя и есть нюансы.

Особенности:

  • Требует наличия подключенного файла css – причем сам файл при этом может быть пустым
  • Требует определения классов элементов (см. код) – при этом классы могут быть не определены
  • При нескольких спойлерах наименования классов элементов должны совпадать
  • Допускается вложенность, без ограничений – при этом должны соблюдаться моменты, описанные выше
  • Закрытие/открытие происходит по клику – при перезагрузке страницы, даже после очистки кэша, спойлер остается в последнем положении
  • Закрывающий/открывающий элемент может быть любой – картинка, кнопка (<button>Спойлер</button>), теги span, div. При этом button должно быть без class; при отсутствии class в div или span будет элемент в виде текста

Между <head></head>:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">
<title>Простой спойлер на HTML и CSS</title>

Между <body></body>:

<h2>Простой спойлер на HTML и CSS</h2>

<div>
    <label>
        <input type="checkbox"/>
    <button>Первый спойлер - button</button>
        <div>
        Первый спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

<div>
    <label>
        <input type="checkbox"/>
    <div>Второй спойлер - div</div>
        <div>
        Второй спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

<div>
    <label>
        <input type="checkbox"/>
    <span>Третий спойлер - span</span>
        <div>
        Третий спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

<div>
    <label>
        <input type="checkbox"/>
    <img src="spoiler.jpg" alt="Спойлер" title="Спойлер">
        <div>
        Четвертый спойлер: текст или другое содержимое
     </div> 
     </label>
 </div> 

coderhs.com