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

Cпойлер средствами css…
В предпраздничные дни выдаётся минутка, когда отвлекаясь от забот, хочется окунуться в собственный мир идей, отстраняясь от предстоящего праздника…
В итоге, — идея: Cмастерить спойлер посредством css и HTML, не дожидаясь триумфального шествия HTML5. Выражаю благодарность Octane с javascript.ru форума и devote ^[1], без которых идея не осуществилась!

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

Мистический код идеи таков:

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

<!--// HTML //-->
<div class="spoiler">

     <input type="checkbox" >
     <div class="box">

           Текст сообщения в спойлере.

     </div>

</div>

Как видим получился кроссбраузерный код, (начиная с ИЕ9/где уже есть этот псевдокласс/ и кончая актуальными версиями остальных браузеров). Cогласно замыслу, — это был «чистый» код!

При попытках расширить действие на ИЕ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 кроссбраузерностью»

<!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"] {
	border-color:transparent!important;
	border-style:none!important;
	background:transparent none!important;
	position:relative;z-index:1;
	margin:-10px 0 -30px -230px;
 }
.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 id="wrap" style="padding:200px 40px;width:70%;margin:0 auto;background-color:#fff;height:100%">


<div class="spoiler">

<input style="width:360px;height:45px;" type="checkbox" >
     <div class="box">
         <span class=close>Скрыть</span><span class=open>Показать</span>
         <blockquote class="Untext">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
         </blockquote>
     </div>

 </div>


</body>
</html>

Минусы:

В ИЕ8 — наличествует пунктирная обводка чекит-бокса при фокусе;
в ИЕ6-7 — чекит панель «винтажно» выдвинута левее спойлера; (Но мы и не утомляли себя задачей поддержки этих ие в начальных замыслах.

DEMO

Автор: Defff

Источник ^[2]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/html/25760

Ссылки в тексте:

[1] devote: http://habrahabr.ru/users/devote/

[2] Источник: http://habrahabr.ru/post/167151/

Нажмите здесь для печати.