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

Ранее в инете делались попытки реализовать подобное через псевдоклассы, — в основном через :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*

  
 
 СкрытьПоказать 
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 
 
 
 

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

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

DEMO