How to: Bereiche ein/ausblenden mit "Click"-Fake

[Gunther]

Guten Morgen!

ein heutzutage häufig benutztes Feature auf Seiten ist das Ein- und Ausblenden von Bereichen wenn man irgendwo klickt.

In der Regel wird dazu auf Javascript zurückgegriffen, es geht aber auch ohne.

Dazu diese CSS:

#check, #showme {display: none;}
#check:checked ~ #showme {display: block;}

> ... und somit z.B. ein [Accordion](http://jqueryui.com/accordion/) nachbauen.  
  
Und wenn man das Ganze dann auch noch per [Transitions](http://www.w3.org/TR/css3-transitions/) animieren möchte, wird man sehr schnell feststellen, dass das mit 'display' nicht geht.  
  
Mit 'height' klappt es nur dann, wenn man für die Höhe einen expliziten Wert angibt (also nicht 'height: auto;'), was in den allermeisten Fällen auch nicht erwünscht ist.  
  
Die "Lösung" besteht also darin, die 'max-height' Eigenschaft (in Kombination mit einem 'overflow: hidden;') zu verwenden, und deren Wert für die Sichtbarkeit des Elements entsprechend groß zu setzen.  
  
  
Gruß Gunther