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

Css spoiler

Cпойлер средствами css

The idea of ​​this article, not expecting the advent of html5, make a spoiler "on click" through css and HTML.

Earlier in the internet, attempts were made to implement this through pseudo-classes, mainly through: focus, which led to the container’s self-cover, with a loss of focus.

The basis of this design - pseudo-class : checked

Minimalist idea looks like this:

  / * CSS * /
 .spoiler> input + .box {
  display: none;
 }
 .spoiler> input: checked + .box {
  display: block;
 }

The text of the message in the spoiler.

As you can see, the cross-browser code has been obtained, starting with IE9, where there is already a “: checked” pseudo-class and ending with current versions of other browsers. According to the plan, this is a “pure” html-css implementation.

When trying to expand the effect on IE6-8, (here, as usual for IE, the “purity” of the implementation is lost), and we include the Google library of pseudo-classes for IE:




The code of “cross-browser dance” * was tested in ХP, Win7-8 *




Hide Show
Lorem Ipsum is simply dummy text.

Minuses: in IE6-7 - the “vintage” check panel is extended to the left of the spoiler; (But we did not set ourselves the task of supporting the data of Yeh in the original designs.

PS: The code allows you to view the content of the spoiler when java-script is disabled, which is required when surfing from old mobile phones, anonymizers or from hard-tuned firewalls.

Demo