jQuery Mobile Klaplåse

Foldbare innholdselementer

Foldbare (Collapsibles) lar deg skjule eller vise innhold - nyttig for lagring av deler av informasjon.

For å opprette en foldbar innholdselement, tildel data-role="collapsible"-egenskapen til en beholder. Legg til en overskriftselement (h1-h6) etterfulgt av hvilken som helst HTML-merkning du vil utvide:

Eksempel

<div data-role="collapsible">
  <h1>Klikk på meg - jeg kan foldes!</h1>
  <p>Jeg er innholdet som kan foldes ut.</p>
</div>

Prøv det selv

Standardvis er innholdet lukket. Hvis du vil utvide innholdet når siden lastes, bruk data-collapsed="false":

Eksempel

<div data-role="collapsible" data-collapsed="false">
  <h1>Klikk på meg - jeg kan foldes!</h1>
  <p>Jeg er standard utvidet nå.</p>
</div>

Prøv det selv

Innhevede foldbare blokker

Det er mulig å plassere innhevede foldbare innholdselementer:

Eksempel

<div data-role="collapsible">
  <h1>Klikk på meg - jeg kan foldes!</h1>
  <p>Jeg er innholdet som vises når det utvides.</p>
  <div data-role="collapsible">
    <h1>Klikk på meg - jeg er en innhevd foldbar blokk!</h1>
    <p>Jeg er innholdet som vises når den innhevede foldbare blokken utvides.</p>
  </div>
</div>

Prøv det selv

Tips:Foldbare innholdselementer kan plasseres i ønsket antall nivåer.

Foldbare samlinger

Foldbare samlinger (Collapsible sets) refererer til sammenkoblede foldbare blokker (ofte kalt akkordeon). Når en ny blokk åpnes, lukkes alle andre blokker.

Opprett flere innholdselementer, og deretter pakk denne foldbare blokken inn i en ny beholder ved hjelp av data-role="collapsible-set":

Eksempel

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Klikk på meg - jeg kan foldes!</h1>
    <p>Jeg er innholdet som vises når det utvides.</p>
  </div>
  <div data-role="collapsible">
    <h1>Klikk på meg - jeg kan foldes!</h1>
    <p>Jeg er innholdet som vises når det utvides.</p>
  </div>
</div>

Prøv det selv

Flere eksempler

Fjern runde kanter ved hjælp af data-inset-egenskaben
Hvordan man fjerner runde kanter fra collapsibles.
Minimer collapsibles ved hjælp af data-mini
Hvordan man gør collapsibles mindre.
Ændr ikoner ved hjælp af data-collapsed-icon og data-expanded-icon
Hvordan man ændrer ikonerne for collapsibles (standard er + og -).