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

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

Идея данной статьи, не ожидая пришествия html5, смастерить спойлер «по клику» посредством css и HTML.

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

Основа данной конструкции — псевдокласс :checked

Минималистически идея выглядит так:

 /* CSS */
.spoiler > input + .box {
 display: none;
}
.spoiler > input:checked + .box {
 display: block;
}
Текст сообщения в спойлере.

Как видим получился кроссбраузерный код, начиная с ИЕ9, где уже есть псевдокласс «:checked» и кончая актуальными версиями остальных браузеров. Cогласно замыслу, — это «чистая» html-css реализация.

При попытках расширить действие на ИЕ6-8, (тут, как обычно для ие,- «чистота» реализации теряется), и мы подключаем гугловскую библиотеку псевдоклассов для ИЕ:


Код «танцев c кроссбраузерностью» *тестировалось в ХP, Win7-8*

Cпойлер средствами css  
СкрытьПоказать
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

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

PS: Код позволяет просматривать контент спойлера при отключённом java-script, — что востребовано при серфе со старых мобильников, анонимайзеров или с жестко-настроенных фаерволов.

DEMO