css-only show/hide

How to make a show-hide block without javascript.


To see the code, just "View Source" of this page.

   1. The css that makes it work is in the <head> section.
      Explanation is there in the css comments.
      
   2. The html tags and classes are in the <body>  :)
   
   3. The "label for" has to be the same as the input checkbox id.
        See what i mean in the html code.
        (This binds them together and makes the checkbox be
            checked or unchecked when the label is clicked.)
 

plus: lean and mean - no javascript means less code, less security/maintenance issues.

plus|minus (depends what you want): on reload the div stays in previous state (open or closed).

minus: can't change the label text and the arrow for open/closed.
        or ... can i? ...  :D


* quite a few years ago, could only do this with javascript,
   and had to edit a javascript function in each show/hide block as well.
   with pretty clunky code.
   
* a few years ago thanks to css, the javascript got cleaner
  and all in separate file. still long tho.
  also wordpress plugins came out to do it with shortcodes.
  nicer - but still javascript ... and (as often happens),
  my nice wordpress plugin stopped working recently.
  
* now i just found this css-only method! it's been around
   for a few years actually, but my method is to be 
   "behind the curve" and let browsers catch up so
   things go more smoothly! i get a chance to try 
   different implementations of something, and when
   it's all stable i port it to all websites and
   all is lovely.