This page has been robot translated, sorry for typos if any. Original content here.

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