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

[Ole.]

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.

Ein einfaches HTML-Grundgerüst (ohne Anspruch auf Validität) könnte so aussehen:

  
<input type="checkbox" id="check">  
<label for="check">Klick mich</label>  
<form id="showme" method="post" action="">  
<textarea></textarea>  
<input type="submit">  
</form>  

Dazu diese CSS:

  
#check, #showme {display: none;}  

Um das Formular anzuzeigen wird die Pseudoklasse :checked genutzt.

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

":checked" kann man nicht nur auf Checkboxen anwenden, sondern auch auf Radiobuttons und somit z.B. ein Accordion nachbauen.

Einzig Internet Explorer 8 und älter können leider mit ":checked" nichts anfangen. Hier ist der Einsatz von Javascript notwendig.

Verbesserungsvorschläge sind willkommen.

Gruß
Ole