Klapp-Inhaltsblöcke
Collapsibles erlauben Inhalte zu verstecken oder zu zeigen, die zum Speichern von Teilen von Informationen nützlich ist.
Um einen zusammenklappbaren Inhaltsblock erstellen, weisen die data-role="collapsible" Attribut in einen Behälter. Im Inneren des Behälters (div) , fügen Sie einen Header (H1-H6) oder Legende Element, gefolgt von einem beliebigen HTML - Markup Sie erweitert werden soll:
Beispiel
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div>
Versuch es selber " Standardmäßig wird der Inhalt geschlossen. Um den Inhalt zu erweitern , wenn die Seite geladen wird , die Verwendung data-collapsed="false" :
Beispiel
<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm
now expanded by default.</p>
</div>
Versuch es selber " Verschachtelte Collapsible Blöcke
Klapp-Inhaltsblöcke können (ein zusammenklappbarer in einem zusammenklappbar) verschachtelt werden:
Beispiel
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
<div
data-role="collapsible" >
<h1>Click me - I'm a
nested collapsible block!</h1>
<p>I'm the expanded
content in the nested collapsible block.</p>
</div>
</div>
Versuch es selber " Klapp-Inhaltsblöcke können so oft verschachtelt werden, wie Sie wollen.
Klapp-Sets
Klapp-Sets sind zusammenklappbar Blöcke, die zusammen gruppiert sind (oft bezeichnet als ein Akkordeon). Wenn ein neuer Block geöffnet, alle anderen Blöcke schließen.
Erstellen Sie mehrere zusammenklappbare Inhaltsblöcke, und dann einen neuen Container mit der Daten Rolle wickeln = "collapsibleset" um die zusammenklappbare Blöcke:
Beispiel
<div data-role="collapsibleset" >
<div
data-role="collapsible">
<h1>Click me - I'm
collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the
expanded content.</p>
</div>
</div>
Versuch es selber " Mehr Beispiele
Klapp - Popup
Wie ein zusammenklappbares Popup zu erstellen.
Entfernen Sie abgerundete Ecke mit dem data-inset Attribut
Wie abgerundeten Ecken zu entfernen und in voller Breite auf Collapsibles hinzufügen.
Minify Collapsibles mit dem data-mini - Attribut
Wie machen Collapsibles kleiner.
Ändern Sie das Symbol mit Daten zusammengeklappten-Symbol und Daten-expanded-Symbol
Wie das Symbol von Collapsibles zu ändern (Standardeinstellung ist + und -).
Ändern die Position des Symbols
Wie die Position des Symbols von Collapsibles zu ändern (die Standardeinstellung ist links).