Как исправить ошибку в работе спойлера на CSS?

Question

[depihayq]

Всем доброго дня.

Есть Спойлер, который работает, в принципе, нормально. Написан на CSS. Вот она - jsfiddle.net/3DGmf/1 Но есть небольшая проблемка.
При клике на область текста, спойлер быстренько закрывается.

А надо чтобы спойлер открывался/закрывался при клике только на кнопку "Спойлер" и никак иначе. Например, как на Хабрахабре (habrahabr.ru/post/145003) При клике в область текста ничего не закрывается.

Примечание. Сам я практически не разбираюсь, код взял из готовых решений и немного подстроил под себя (стиль). Спойлер должен остаться также на CSS . Без других дополнительных скриптов, типа JavaScript

Буду благодарен за помощь. Спасибо за внимание.

Answer 1

[Александр Петров]

В вашем примере, текст находится внутри label. Клик по тексту => клик по label => изменение статуса чекбокса => скрытие текста.
Вынести текст за лейбл, span сделать лейблом, указать ему чекбокс, чекбоксу id.
Тыц

Comments

[depihayq]

Спасибо за ответ, но к сожалению, если скопировать html код и продублировать, якобы у нас два спойлера, то нижний спойлер не работает, при клике на нижний - открывается верхний.

одна проблема решилась, но другая появилась)) Смотрю через Chrome

[Александр Петров]

@depihayq Я ж не просто так про ID упомянул. Разным спойлерам - разные ID. Поменять у чекбокса и у лейбла(атрибут for). jsfiddle.net/ZTjw2

[depihayq]

@dzhiriki аа, спасибо! Благодарен очень!