Display
Code Sources Icon Code Sources Icon

Wird ein HTML-Element dargestellt oder bleibt es (vorläufig) unsichtbar, soll es mit den Elementen mitfliessen oder soll es einen eigenen Block, eine eigene Zeile bilden? Dieses Verhalten regelt die CSS-Eigenschaft "display".
Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
HTML Elemente

Aufgabe 12 > weiter

Bei einem "Accordion" wird der Inhalt unter dem Titel ausgeblendet "display:none;" bei Klick auf den Titel wird der Inhalt eingeblendet mit "display:block;". Standarmässig sind alle HTML-Elemente eingeblendet, sei es als Block- oder Inline-Element. Jedes Element lässt sich ausblenden, es verschwindet aus der Browseransicht, verbleibt aber im Quelltext.

  1. Untersuche zuerst die Funktion des Accordions. Klicke um die Inhalte zu öffnen und zu schliessen.
  2. Untersuche den HTML-Quelltext im Editor. (Für die Funktionalität als Accordion wurde ein "Input-type=checkbox" verwendet, da dieses Eingabefeld auf Klick reagiert, auch wenn es ausgeblendet ist. Die Anschrift der Checkbox erfolgt mit einem "label".)
  3. In den CSS-Regeln siehst du, dass "input" mit "dispaly:none;" ausgebledet wurde.
    Um die Checkbox zu sehen, stelle die Sichtbarkeit um. Beispiel:
            input {
                display: block;
            }
  4. Untersuche die Checkbox in der HTML-Ausgabe. Du siehst nun die Checkbox und das Häckchen bei Klick. Für das Accordion ist es aber schöner, wenn sie ausgeblendet bleibt. Blende die CSS-Eigenschaft "input" wieder aus: "display:none;".
  5. In den CSS-Regeln auf Zeile 11 siehst du, dass die "label" (Titelzeilen) eingeblendet sind. Sonst würde nichts mehr sichtbar sein.
  6. In den CSS-Regeln auf Zeile 32 siehst du, dass "input", "label" und "content" ausgeblendet sind.
  7. Blende alle Elemente vorübergehend ein, um sie untersuchen zu können. Beispiel:
            input + label + .content {
                display: block;
            }

    Lade anschliessend die Seite neu, um wieder zurückzustellen!
  8. In den CSS-Regeln Zeile 35 siehst du den Auslöser "checked", der bei Klick augeführt wird und so die "gecheckten" Inhalte wieder einblendet.
            input:checked + label + .content {
                display: block;
            }
DB-Table: cssbasic12