В предпраздничные дни выдаётся минутка, когда отвлекаясь от забот, хочется окунуться в собственный мир идей, отстраняясь от предстоящего праздника…
В итоге, — идея: Cмастерить спойлер посредством css и HTML, не дожидаясь триумфального шествия HTML5. Выражаю благодарность Octane с javascript.ru форума и devote, без которых идея не осуществилась!
Ранее исследованные попытки в инете делались через псевдоклассы, в основном через :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]-->
<!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(https://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(https://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
