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 * 








  приховати Показати
 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Мінуси: в ІЕ6-7 - Чекіта панель «винтажно» висунута лівіше спойлера; (Але ми і не ставили перед собою завдання підтримку даних Ії в початкових задумах.

PS: Код дозволяє переглядати контент спойлера при відключеному java-script, - що затребуване при серфі зі старих мобільників, анонімайзерів або з жорстко-налаштованих фаєрволів.

DEMO