Bereiche verdecken - collapsible

jQuery Mobile bietet die Möglichkeit, verdeckte Bereiche anzubieten. Dadurch kann mehr Übersicht bei viel Inhalt für den Nutzer „erzeugt“ werden. Diese Funktion erfolgt über das Attribut data-role="collapsible".

Die erste Überschrift wird als anklickbaren Bereich und + angezeigt.

<div data-role="collapsible">
  <h1>Für mehr Infos anklicken</h1>
  <p>Bereich der eingeblendet wird.</p>
</div>

Soll der Bereich von Anfang an sichtbar sein und durch Anklicken einklappbar sein wird dies über das Attribut data-collapsed="false" erreicht.

<div data-role="collapsible" data-collapsed="false">
  <h1>Infos verkleinerbar</h1>
  <p>Bereich der ausgeblendet werden kann.</p>
</div>

Diese Bereiche können auch ineinander geschachtelt werden.