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

[Der Martin]

Hallo Ole,

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.

ja, wie ich vor ein paar Tagen auch schon ansatzweise gezeigt habe.

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

Nein. Durch eine zusätzliche Negation mit der Pseudoklasse :not() kann man die Logik umkehren, so dass man eine Fallback-Lösung integriert hat, bei der dann eben alle Bereiche sichtbar sind, wenn der Browser nicht ganz mitkommt.

Verbesserungsvorschläge sind willkommen.

War der okay? :-)

Ciao,
 Martin

[Ole.]

Hi Martin

War der okay? :-)

Sehr hilfreich. In der Tat. Allerdings wird dadurch ja "nur" verhindert, dass die Bereiche ausgeblendet werden.
Um das Ein- und Ausblenden, also die angestrebte Funktionalität, muss sich ja trotzdem dann Javascript kümmern (was ich auch in meinem Ursprungsbeitrag ausdrücken wollte).

Danke & Gruß
Ole

[Der Martin]

Hallo,

Um das Ein- und Ausblenden, also die angestrebte Funktionalität, muss sich ja trotzdem dann Javascript kümmern (was ich auch in meinem Ursprungsbeitrag ausdrücken wollte).

ja, kommt auf den Standpunkt an. Ich habe das als Feature eingestuft, auf das man eben achselzuckend verzichtet, wenn's der Browser nicht kann, solange trotzdem alle Informationen erreichbar bleiben. Wenn man den Effekt des Ein- und Ausblendens wirklich um jeden Preis haben möchte ... ja, dann glaube ich auch, dass man auf JS zurückgreifen muss.
Allerdings kann JS auch deaktiviert sein, also brauche ich auch noch ein Fallback für den Fall, dass das Fallback nicht funktioniert ...

Ciao,
 Martin

[Gunther]

Hi Ole!

Um das Ein- und Ausblenden, also die angestrebte Funktionalität, muss sich ja trotzdem dann Javascript kümmern (was ich auch in meinem Ursprungsbeitrag ausdrücken wollte).

Also die mir bekannte Variante_ohne_Javascript benutzt die :target-Pseudoklasse (siehe Beispiel 2).

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Also die mir bekannte Variante_ohne_Javascript benutzt die :target-Pseudoklasse (siehe Beispiel 2).

Die womöglich den Nachteil mit sich bringt, dass man bei Click auf der Seite umherspringt.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Also die mir bekannte Variante_ohne_Javascript benutzt die :target-Pseudoklasse (siehe Beispiel 2).

Die womöglich den Nachteil mit sich bringt, dass man bei Click auf der Seite umherspringt.

Auch hier stimme ich dir vollkommen zu. Noch dazu finde ich den Punkt, dass sie die History beeinflusst auch eher "nervig".

Aber wie schon in dem anderen Beitrag geht es darum aufzuzeigen, dass es durchaus auch reine CSS Lösungen gibt. Dass diese gegenüber möglichen JS Umsetzungen den einen oder anderen Nachteil aufweisen steht dabei außer Frage. Aber als Fallback für die "paar" User ohne JS ...! ;-)

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Aber wie schon in dem anderen Beitrag geht es darum aufzuzeigen, dass es durchaus auch reine CSS Lösungen gibt.

Es gibt durchaus auch Bindestriche.

Und die CSS-Lösung sollte verwendet werden, keine Transition per JavaScript. Zum einen wegen Ruckeln im Browser, zum anderen der Kätzchen wegen.

JavaScript hilft lediglich ein bisschen nach.

Aber als Fallback für die "paar" User ohne JS ...! ;-)

Nein, JavaScript wäre der Fallback für Browser, die CSS-Taransitions noch nicht können. Ob der Aufwand lohnt, den Schnickschnack für die "paar" User zu implementieren, muss jeder selbst entscheiden. Ich würde eher auf den Effekt verzichten (progressive enhancement).

Qapla'

[dave]

Hi,

Die Idee hatte ich auch mal.
Damals kamen keine grundlegenden Punkte auf, die dagegen sprechen.

Das einzige was ich in deinem Beispiel verbessern würde, sind die Selektoren. IDs sind denke ich da ungünstig. Auch den general sibling combinator finde ich eher suboptimal, da man hier für jeden Tab eine extra CSS-Regel mit der ID benötigt. Besser wäre der adjacent sibling combinator, so hätte man mit einer CSS-Regel alle ausklappbaren Elemente erwischt.

~dave

[Ole.]

Hi Dave,

Das einzige was ich in deinem Beispiel verbessern würde, sind die Selektoren. [...]

Ob man jetzt Klassen oder IDs nimmt oder welche Selektoren man nimmt ist ja jedem selbst überlassen. Das Beispiel sollte nur zeigen, wie es generell funktioniert.

Dein Akkordeon/Tab-Ansatz ist genau das was ich meinte.

Danke & Gruß
Ole

[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

[Gunnar Bittersmann]

@@Gunther:

nuqneH

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.

Klappt gut fürs Einblenden, ist aber problematisch fürs Ausblenden.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Klappt gut fürs Einblenden, ist aber problematisch fürs Ausblenden.

Keine Frage, dass das in einigen Fällen nicht "optimal" ist - kennst du aktuell eine "bessere" Lösung_ohne_Javascript?
Ich sehe das eben als eine reine Fallback Variante, wenn eben kein JS verfügbar ist.

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Keine Frage, dass das in einigen Fällen nicht "optimal" ist - kennst du aktuell eine "bessere" Lösung_ohne_Javascript?

Nein.

Ich sehe das eben als eine reine Fallback Variante, wenn eben kein JS verfügbar ist.

Nein, JavaScript wäre der Fallback.

Qapla'

[Gunnar Bittersmann]

@@Ole.:

nuqneH

Um das Formular anzuzeigen

Du hast keine Daten, die der Nutzer eingibt und die zum Server geschickt werden sollen. Also ist ein Formular unsinnig.

Checkboxen kannst du auch ohne form-Element verwenden.

wird die Pseudoklasse :checked genutzt.

Stattdessen lassen sich auch a-Elemente (ohne @href, ggfs. mit @tabindex="0") und die Pseudoklasse :focus verwenden.

Qapla'

[dave]

Hi,

Stattdessen lassen sich auch a-Elemente (ohne @href, ggfs. mit @tabindex="0") und die Pseudoklasse :focus verwenden.

Damit haben AFAIK einige Browser auf Mobilen Geräten Probleme.

~dave

[Ole.]

Hallo Gunnar,

Du hast keine Daten, die der Nutzer eingibt und die zum Server geschickt werden sollen. Also ist ein Formular unsinnig.

Hier kann ich dir nicht folgen. Kann man in eine Textarea keine Daten eingeben und diese mit einem Submit-Button wegschicken?

Checkboxen kannst du auch ohne form-Element verwenden.

Mache ich ja.

Stattdessen lassen sich auch a-Elemente (ohne @href, ggfs. mit @tabindex="0") und die Pseudoklasse :focus verwenden.

Was den Nachteil hat, dass sobald das Element den Fokus nicht mehr hat auch direkt der eingeblendete Bereich ausgeblendet wird.
In meinem Beispiel schon wenn der User was in die Textarea eingeben will und deshalb den Fokus auf dieses Element setzt.

Gruß
Ole

[Gunnar Bittersmann]

@@Ole.:

nuqneH

Hier kann ich dir nicht folgen.

Gut so, ich war auf dem Irrweg. ;-)

Dein Formular ist ja der ein-/auszublendende Inhalt. Die Checkbox fürs Ein-/Ausblenden ist außerhalb.

Qapla'