jQuery Mobile Einklappbare Blöcke
Einklappbare Inhaltsblöcke
Einklappbare Blöcke ermöglichen es Ihnen, Inhalte auszublenden oder anzuzeigen - nützlich zum Speichern einiger Informationen.
Um einen einklappbaren Inhaltsblock zu erstellen, fügen Sie dem Container das Attribut data-role="collapsible" hinzu. Fügen Sie innerhalb des Containers (div) ein Überschriftselement (H1-H6) hinzu, gefolgt von dem HTML-Markup, das Sie aufklappen möchten:
Beispiel
<h1>Klick mich - ich kann einklappen!</h1>
<p>Ich bin einklappbarer Inhalt.</p>
</div>
Selbst ausprobieren »
Standardmäßig ist der Inhalt eingeklappt. Um den Inhalt beim Laden der Seite aufzuklappen, verwenden Sie data-collapsed="false":
Beispiel
<h1>Klick mich - ich kann einklappen!</h1>
<p>Ich bin jetzt standardmäßig erweitert.</p>
</div>
Selbst ausprobieren »
Verschachtelte einklappbare Blöcke
Einklappbare Inhaltsblöcke können ineinander verschachtelt werden:
Beispiel
<h1>Klick mich - ich kann einklappen!</h1>
<p>Ich bin der erweiterte Inhalt.</p>
<div data-role="collapsible">
<h1>Klicke mich - Ich bin ein verschachtelter einklappbarer Block!</h1>
<p>Ich bin der erweiterte Inhalt innerhalb des verschachtelten einklappbaren Blocks.</p>
</div>
</div>
Selbst ausprobieren »
 |
Einklappbare Inhaltsblöcke können so oft wie nötig verschachtelt werden. |
|---|
Einklappbare Sets
Ein einklappbares Set kombiniert einklappbare Blöcke miteinander (wie ein Akkordeon). Wenn ein neuer Block erweitert wird, werden alle anderen Blöcke eingeklappt.
Erstellen Sie mehrere einklappbare Inhaltsblöcke und wickeln Sie dann die einklappbaren Inhaltsblöcke in einen neuen Container mit data-role="collapsible-set":
Beispiel
<div data-role="collapsible">
<h1>Klick mich - ich kann einklappen!</h1>
<p>Ich bin der erweiterte Inhalt.</p>
</div>
<div data-role="collapsible">
<h1>Klick mich - ich kann einklappen!</h1>
<p>Ich bin der erweiterte Inhalt.</p>
</div>
</div>
Selbst ausprobieren »
Weitere Beispiele
Abgerundete Ecken und Ränder mit dem data-inset-Attribut entfernen
Wie man die abgerundeten Ecken und Ränder von einklappbaren Blöcken entfernt.
Einklappbare Blöcke mit dem data-mini-Attribut miniaturisieren
Wie man einklappbare Blöcke kleiner macht.
Symbole mit data-collapsed-icon und data-expanded-icon ändern
Wie man die Symbole von einklappbaren Blöcken ändert (Standard ist + und -).
Einklappbare Elemente in einem Popup erstellen.
Wie man die Position des Symbols in einklappbaren Elementen ändert (Standard ist links).