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

Spoiler css

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

The idea of ​​this article, not expecting the advent of html5, is to make a “click-through” spoiler using css and HTML.

Earlier on the Internet, attempts were made to implement this through pseudo-classes, mainly through: focus, which led to self-hiding of the container, in case of loss of focus.

The basis of this construction is the 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, we got cross-browser code, starting with IE9, where there is already a “: checked” pseudo-class and ending with current versions of other browsers. By design, this is a “pure” html-css implementation.

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




The code for "dancing with cross-browser compatibility" * was tested in XP, Win7-8 *




Hide Show
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Cons: in IE6-7 - checks the panel "vintage" is extended to the left of the spoiler; (But we did not set ourselves the task of supporting the data of IE in the original plans.

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

Demo