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: 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 г.

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


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

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

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

Стильные спойлеры на CSS3 и jQuery — Уникальные скрипты и готовые решения для сайта

.wrapper {

width: 820px;

margin: 10px;

padding: 0;

}

 

.wrapper > li {

display: inline;

margin: 0;

}

 

.info-box-green, .info-box-red, .info-box-sky {

margin: 50px auto;

padding: 0;

width: 480px;

-webkit-box-shadow: 0 8px 6px -6px black;

-moz-box-shadow: 0 8px 6px -6px black;

box-shadow: 0 8px 6px -6px black;

}

 

.info-box-red h5 {

-webkit-border-radius: 10px;

border-radius: 10px;

margin-bottom: -10px;

}

 

.info-box-red > .info-content > .text {

-webkit-border-radius: 0 0 10px 10px;

border-radius: 0 0 10px 10px;

}

 

.info-box-green h5, .info-box-green > .info-content > .text {

background-color: #00AB83;

}

 

.info-box-red h5, .info-box-red > .info-content > .text {

background-color: #FF434C;

}

 

.info-box-sky h5, .info-box-sky > .info-content > .text {

background-color: #00A5C3;

}

 

.info-box-green h5, .info-box-red h5, .info-box-sky h5 {

padding: 25px;

font-size: 1.125em;

font-weight: 400;

color: #FFF;

}

 

.info-box-green > .info-content > .text, .info-box-red > .info-content > .text, .info-box-sky > .info-content > .text {

padding: 0px;

font-size: 1em;

line-height: 1.5em;

height: 0;

color: #FFF;

overflow: hidden;

-webkit-transition:  height 200ms ease;  

-moz-transition:  height 200ms ease;  

-o-transition:  height 200ms ease;  

transition:  height 200ms ease;

}

 

.info-box-green > .info-content > .text > p, .info-box-red > .info-content > .text > p, .info-box-sky > .info-content > .text > p {

padding: 20px 20px 60px;

}

 

.info-box-sky > .info-content > .text {

background-color: #FFF;

color: #444;

border-radius: 0;

}

 

.info-box-green > .info-content > .text.open-green, .info-box-red > .info-content > .text.open-red, .info-box-sky > .info-content > .text.open-sky {

display: block;

height: auto;

}

 

.info-box-green > .info-content > span.close-green, .info-box-red > .info-content > span.close-red, .info-box-sky > .info-content > span.close-sky {

-webkit-transform:rotate(135deg);

-moz-transform:rotate(135deg);

-o-transform:rotate(135deg);

-ms-transform:rotate(135deg);

}

 

.info-box-green span, .info-box-red span, .info-box-sky span {

display: inline-block;

float: right;

position: relative;

bottom: 60px;

right: 10px;

margin: 0;

padding: 10px;

color: #FFF;

font-size: 2em;

cursor: pointer;

/*  Rotate ‘+’ to ‘X’ */

-webkit-transition: all 600ms ease-in-out;

-moz-transition: all 600ms ease-in-out;

-o-transition: all 600ms ease-in-out;

-ms-transition: all 600ms ease-in-out;

transition: all 600ms ease-in-out;

}

 

.info-box-sky > .info-content > span.close-sky {

color: #444;

}

 

.info-box-red span {

position: relative;

bottom: 50px;

right: 10px;

}

imapo.ru

Простой спойлер на 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

Создаем свой собственный спойлер для сайта

147

543

Предлагаем Вам совсем простой и небольшой по своему размеру JavaScript код, который позволит Вам использовать на своем сайте спойлеры для показа/скрытия объемных материалов.

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

Спойлер (кликните для показа/скрытия)

Здесь содержится все то, что должен скрывать спойлер.
Под спойлером может содержаться не только текст, но и картинки,
таблицы и другие элементы.

Для получения точно такого же спойлера, как в примере чуть выше, добавьте на свой сайт следующий JavaScript код:

JavaScript код:

<script type="text/javascript">
function open_close(id_spol) {
var obj = "";
if (document.getElementById) obj = document.getElementById(id_spol).style;
else if (document.all) obj = document.all[id_spol];
else if (document.layers) obj = document.layers[id_spol];
else return 1;

if (

obj.display == "") obj.display = "none";
else if (obj.display != "none") obj.display = "none";
else obj.display = "block";
}
</script>

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

HTML код:

<div class="spoiler_style" onClick="open_close('spoiler1')">
 <b>Спойлер</b> (кликните для показа/скрытия)
</div>
<div id="spoiler1" class="spoiler_body" style="display: none;">
 Здесь содержится все то, что должен скрывать спойлер.<br>
 Под спойлером может содержаться не только текст, но и картинки,<br>
 таблицы и другие элементы.<br>
 <img src="http://usefulscript.ru/image/img_1.png" alt="Изображение под спойлером" width="250">
</div>

Вместо текстовой надписи «Спойлер (кликните для показа/скрытия)» можно использовать какую-нибудь картинку:

HTML код:

<div class="spoiler_style" onClick="open_close('spoiler1')">
 <img src="image/spoiler.png" alt="Изображение спойлера" width="200">
</div>
<div id="spoiler1" class="spoiler_body" style="display: none;">
 Здесь содержится все то, что должен скрывать спойлер.<br>
 Под спойлером может содержаться не только текст, но и картинки,<br>
 таблицы и другие элементы.<br>
 <img src="http://usefulscript.ru/image/img_1.png" alt="Изображение под спойлером" width="250">
</div>

Так же не забываем добавить стили для наших спойлеров. Для этого добавьте следующий код в шапку сайта между тегами <head> и </head>.

HTML код:

<style type="text/css">
 .spoiler_style {
     width: 300px;
     padding: 1px 7px;
    cursor: pointer;
    background: #e7e7e7;
    border: 1px solid #4874a3;
    border-radius: 3px;
 }
 .spoiler_body {
    width: 480px;
    padding: 1px 7px;
    display: none;
    background: #F7F7F7;
    border: 1px solid #669966;
 }
</style>

Вот и все. В результате использования данного скрипта у Вас должен получиться простой спойлер, который поможет Вам сэкономить немало места на сайте и сконцентрировать внимание Ваших посетителей на самом главном.

Дата создания: 15:02:37 06.11.2011 г.

Дата обновления: 22:36:47 08.03.2012 г.

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


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

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

usefulscript.ru

Спойлер в HTML | Any People’s blog

Пост о том, как создать спойлер средствами HTML и JS.
Ниже — рабочий код, рассмотрен по частям.

1. Эта часть превращает курсор в руку при наведении на спойлер.

<style>
    .spoilertop {cursor:pointer;}
</style>/>/>

2. Собственно, сам скрипт спойлера. Вставляйте его в конец страницы.

<!—Собственно, сам скрипт спойлера—>
    <script language=»JavaScript» type=»text/javascript»>
    function openClose(id)
    {
    var obj = «»;

    // Check browser compatibility
    if(document.getElementById)
    obj = document.getElementById(id).style;
    else if(document.all)
    obj = document.all[id];
    else if(document.layers)
    obj = document.layers[id];
    else
    return 1;

    // Do the magic
    if(obj.display == «»)
    obj.display = «none»;
    else if(obj.display != «none»)
    obj.display = «none»;
    else
    obj.display = «block»;
    }
    </script>
    <!—/Собственно, сам скрипт спойлера—>

3. Спойлер. Вставляйте этот кусок туда, где хотите ваш спойлер расположить

<!—Титл спойлера №1—>
    <div>
    Заголовок спойлера
    </div>
    <!—Содержание спойлера—>
    <div>
    Тут пишем то, что будет под спойлером.
    </div>

3. Второй спойлер.

<!—Титл спойлера №2—>
    <div>
    Заголовок спойлера
    </div>
    <!—Содержание спойлера—>
    <div>
    Тут пишем то, что будет под спойлером.
    </div>

Если нужно поставить несколько спойлеров, то в последующих спойлерах меняйте цифру 1 на соответствующую. как показано в примере второго спойлера. Глянуть результат

blog.any-p.ru