jQuery Mobile Collapsible

Vouwbare inhoudsblokken

Vouwbare blokken (Collapsibles) laten je inhoud verbergen of weergeven - handig voor het opslaan van gedeeltelijke informatie.

Om vouwbare inhoudsblokken te maken, assigneer een data-role="collapsible"-eigenschap aan een container. Voeg in de container (div) een titel-element (h1-h6) toe, gevolgd door de HTML-markeringen die je wilt uitklappen:

Voorbeeld

<div data-role="collapsible">
  <h1>Klik op mij - Ik kan vouwen!</h1>
  <p>Ik ben de vouwbare inhoud.</p>
</div>

Probeer het zelf

Standaard is deze inhoud dicht. Als je de inhoud wilt uitklappen bij het laden van de pagina, gebruik dan data-collapsed="false":

Voorbeeld

<div data-role="collapsible" data-collapsed="false">
  <h1>Klik op mij - Ik kan vouwen!</h1>
  <p>Ik ben standaard uitgeklapt.</p>
</div>

Probeer het zelf

Geneste vouwbare blokken

Je kunt vouwbare inhoudsblokken nesten:

Voorbeeld

<div data-role="collapsible">
  <h1>Klik op mij - Ik kan vouwen!</h1>
  <p>Ik ben de inhoud die wordt weergegeven.</p>
  <div data-role="collapsible">
    <h1>Klik op mij - Ik ben een geneste vouwbare blok!</h1>
    <p>Ik ben de inhoud die wordt weergegeven in een geneste vouwbare blok.</p>
  </div>
</div>

Probeer het zelf

Tip:Vouwbare inhoudsblokken kunnen zoveelmaals genest worden als je wilt.

Vouwbare sets

Vouwbare sets (Collapsible sets) verwijzen naar samengevoegde vouwbare blokken (meestal bekend als een accordeon). Wanneer een nieuw blok wordt geopend, sluiten alle andere blokken.

Maak een aantal inhoudsblokken en pak deze vouwbare blokken vervolgens in met een nieuwe container met behulp van data-role="collapsible-set":

Voorbeeld

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Klik op mij - Ik kan vouwen!</h1>
    <p>Ik ben de inhoud die wordt weergegeven.</p>
  </div>
  <div data-role="collapsible">
    <h1>Klik op mij - Ik kan vouwen!</h1>
    <p>Ik ben de inhoud die wordt weergegeven.</p>
  </div>
</div>

Probeer het zelf

Meer voorbeelden

Verwijder de hoeken via de data-inset-eigenschap
Hoe de hoeken van collapsibles te verwijderen.
Minimaliseer collapsibles via data-mini
Hoe collapsibles kleiner te maken.
Wijzig de iconen via data-collapsed-icon en data-expanded-icon
Hoe de iconen van collapsibles te wijzigen (de standaardwaarden zijn + en -).