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» і закінчуючи актуальними версіями інших браузерів. Згідно задуму, - це «чиста» 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