Кроссбраузерный спойлер по клику на CSS3

[iDrugov]

Этот "урок" сочетает в себе все темы, поднятые ранее и видимо окончательно (или до новых модификаций языка) закрывает данный вопрос.

Спойлер открывается по клику на его название и скрывается по клику в любую область за его пределами.

Ничего нового, просто последовательное строение:

#spoiler:focus .spoiler
{
  display: block;
}

.spoiler
{
  display: none;
  overflow: hidden;
}

<a href="#" id="spoiler">Название спойлера
  <div class="spoiler">информация для скрытия, появляется по клику</div>
</a>

Самое простое решение, которое не работает в Google Chrome вообще.

Запросив на гугле: "WTF?", получил рекомендацию прописать: tabindex="1" Почему "1"? Это номер фокусировки. Если будете создавать несколько спойлеров, то указываете номера по порядку для каждого нового: "1", "2," "3" и т.д.

<a href="#" id="spoiler" tabindex="1">Название спойлера
  <div class="spoiler">информация для скрытия, появляется по клику</div>
</a>

Проверили, работает! В Хроме выделяется желтым цветом, в Opera и Mozilla всё норм, оставляем.

Всё? А нет. Нам нужна кнопка, которая будет раскрывать спойлер. Дело в том, что кнопка должна быть relative, или вообще не содержать position, потому что при absolute, перестает работать спойлер в Mozilla.

.button
{
  position: relative;
  display: inline-block;
  padding: 0 5px 2px 5px;
  background: #69C;
}

<a href="#" id="spoiler"><p class="button">Название спойлера</p>
  <div class="spoiler">информация для скрытия, появляется по клику</div>
</a>

Ура! Две бессоные ночи не прошли даром.

Кстати, любители извращений, типа Internet Explorer, так же могут его объюзать, что радует. Всё ориентировано исключительно на Windows-пользователя с компьютера/ноута, так что за работоспособность в планшетах и тем более на мобильниках через jar, вообще ничего не обещаю.

Edited October 30, 2012 by iDrugov

[Int]

Жалко, что назад закрывается нажатием не на ту же кнопку, а в другой области страницы. Не всем очевидно.

[sigma77]

iDrugov,

Зачем поднимать в разных темах один и тот же вопрос?

http://jsfiddle.net/HGHyJ/

Должен работать везде кроме ИЕ8 и ниже.

[iDrugov]

sigma77, ничего себе! Месье, ды вы гуру CSS! Такого кода я еще не видел, аплодирую стоя!

[strange_atom]

iDrugov, не месье, а мисс (или миссис. не в курсе семейного положения)

а про один вопрос в разных темах верно замечено - зачем плодить темы?

[iDrugov]

strange_atom, недоглядел как-то, что не месье Затем, что тема та была без ответа, да и читать её долго, а теперь есть два готовых решения на двух постах, на первых запросах гугла

[Viper]

Жалко, что назад закрывается нажатием не на ту же кнопку, а в другой области страницы. Не всем очевидно.

Можно еще так:

_http://jsfiddle.net/webviper/B9AMZ/16/

[iDrugov]

Жжете, ребят! Буду объюзывать ваше творчество еще пару ночей

[gibigate]

http://jsfiddle.net/webviper/B9AMZ/16/

[Int]

iDrugov,

Зачем поднимать в разных темах один и тот же вопрос?

http://jsfiddle.net/HGHyJ/

Должен работать везде кроме ИЕ8 и ниже.

Странно, если делаю чекбокс видимым, то работает, а если он скрыт, то нет. OpenSUSE 12.2, FF 16.0.1, adblock, noscript (исключения для всех скриптов на jsfiddle)

[sigma77]

Int,

А можешь проверить галочка проставляется, когда чекбокс скрыт?

[Int]

А можешь проверить галочка проставляется, когда чекбокс скрыт?

Нет. На винде тоже, кстати.

[sigma77]

А можешь проверить галочка проставляется, когда чекбокс скрыт?

Нет. На винде тоже, кстати.

Странно... у меня всё работает...

[iDrugov]

[Можно еще так:_http://jsfiddle.net/webviper/B9AMZ/16/

http://jsfiddle.net/webviper/B9AMZ/16/

Очень толковый код! Долго веъзжал и соображал, но сделал на сайте как хотел. Удобно то, что еще один такой же спойлер сворачивает предыдущий. Можно делать подряд спойлеры и не беспокоиться особо. Правда сложный код в общей сложности вышел, чтобы реализовать кнопку "обо мне".

Edited October 23, 2012 by iDrugov

[Int]

Странно... у меня всё работает...

FF 19.0.2, openSUSE 12.3, всё ещё не работает. Возможно, дело в одном из моих аддонов.