Klappbare Elemente in jQuery Mobile

Klappbare Inhaltsblöcke

Klappbare Elemente (Collapsibles) erlauben es Ihnen, Inhalte zu verbergen oder anzuzeigen - sehr nützlich für die Speicherung von Teillinien.

Um klappbare Inhaltsblöcke zu erstellen, weisen Sie einem Behälter die Eigenschaft data-role="collapsible" zu. Fügen Sie im Behälter (div) ein Überschriftselement (h1-h6) hinzu, gefolgt von beliebigen HTML-Markierungen, die Sie erweitern möchten:

Beispiel

<div data-role="collapsible">
  <h1>Klicken Sie auf mich - Ich kann einklappen!</h1>
  <p>Ich bin der klappbare Inhalt.</p>
</div>

Versuchen Sie es selbst

Standardmäßig ist dieser Inhalt geschlossen. Um den Inhalt beim Laden der Seite zu erweitern, verwenden Sie data-collapsed="false":

Beispiel

<div data-role="collapsible" data-collapsed="false">
  <h1>Klicken Sie auf mich - Ich kann einklappen!</h1>
  <p>Ich bin standardmäßig ausgeklappt.</p>
</div>

Versuchen Sie es selbst

Eingebettete klappbare Blöcke

Klappbare Inhaltsblöcke können eingebettet werden:

Beispiel

<div data-role="collapsible">
  <h1>Klicken Sie auf mich - Ich kann einklappen!</h1>
  <p>Ich bin der erweiterte Inhalt.</p>
  <div data-role="collapsible">
    <h1>Klicken Sie auf mich - Ich bin ein eingebetteter Klappblock!</h1>
    <p>Ich bin der erweiterte Inhalt in einem eingebetteten Klappblock.</p>
  </div>
</div>

Versuchen Sie es selbst

Tipp:Klappbare Inhaltsblöcke können so oft wie gewünscht in einer Kette verschachtelt werden.

Klappbare Sammlung

Klappbare Sammlungen (Collapsible sets) beziehen sich auf zusammengefasste Klappblöcke (oft als Akkordeon bezeichnet). Wenn ein neuer Block geöffnet wird, werden alle anderen Blöcke geschlossen.

Erstellen Sie mehrere Inhaltsblöcke und verpacken Sie diesen Klappblock durch die Verwendung von data-role="collapsible-set" in einem neuen Behälter:

Beispiel

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Klicken Sie auf mich - Ich kann einklappen!</h1>
    <p>Ich bin der erweiterte Inhalt.</p>
  </div>
  <div data-role="collapsible">
    <h1>Klicken Sie auf mich - Ich kann einklappen!</h1>
    <p>Ich bin der erweiterte Inhalt.</p>
  </div>
</div>

Versuchen Sie es selbst

Mehr Beispiele

Entfernen Sie die Ecken durch das data-inset-Attribut
Wie man die Ecken von collapsibles entfernt.
Minimieren Sie collapsibles durch data-mini
Wie man collapsibles kleiner macht.
Ändern Sie die Symbole durch data-collapsed-icon und data-expanded-icon
Wie man die Symbole von collapsibles ändert (Standard sind + und -).