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

Ранее в инете делались попытки реализовать подобное через псевдоклассы, — в основном через :focus, что вело к самоскрытию контейнера, при потере фокуса.
Основа данной конструкции — псевдокласс :checked
Как видим получился кроссбраузерный код, начиная с ИЕ9, где уже есть псевдокласс «:checked» и кончая актуальными версиями остальных браузеров. Cогласно замыслу, — это «чистая» html-css реализация.
При попытках расширить действие на ИЕ6-8, (тут, как обычно для ие,- «чистота» реализации теряется), и мы подключаем гугловскую библиотеку псевдоклассов для ИЕ:
наличествует пунктирная обводка чекит-бокса при фокусе;// fixed (подсказка от fcunited )
в ИЕ6-7 — чекит панель «винтажно» выдвинута левее спойлера; (Но мы и не ставили себе задачу поддержку данных Ие в изначальных замыслах.
PS: Код позволяет просматривать контент спойлера при отключённом java-script, — что востребовано при серфе со старых мобильников, анонимайзеров или с жестко-настроенных фаерволов.
Хочу выразить признательность 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, где уже есть псевдокласс «: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 id="wrap" style="padding:200px 40px;width:70%;margin:0 auto;background-color:#fff;height:100%">
<div class="spoiler">
<!--* Добавлен tabindex="-1" для снятия фокуса при переходе по "tab" -->
<input style="width:360px;height:45px;" type="checkbox" tabindex="-1" >
<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>
</div>
</body>
</html>
Минусы:
В ИЕ8 —в ИЕ6-7 — чекит панель «винтажно» выдвинута левее спойлера; (Но мы и не ставили себе задачу поддержку данных Ие в изначальных замыслах.
DEMO
PS: Код позволяет просматривать контент спойлера при отключённом java-script, — что востребовано при серфе со старых мобильников, анонимайзеров или с жестко-настроенных фаерволов.
Хочу выразить признательность Octane с javascript.ru форума и devote, без которых идея не могла быть реализованной.