Collapsible jQuery Mobile

Contenitori di contenuto pieghevole

I pieghevoli (Collapsibles) ti permettono di nascondere o mostrare il contenuto - molto utile per lo storage di informazioni parziali.

Per creare un contenitore di contenuto pieghevole, assegna l'attributo data-role="collapsible" a un contenitore (div). Nell'elemento del titolo (h1-h6), aggiungi qualsiasi etichetta HTML che desideri espandere:

Esempio

<div data-role="collapsible">
  <h1>Clicca su di me - posso ripiegarmi!</h1>
  <p>Sono il contenuto pieghevole.</p>
</div>

Prova personalmente

Per impostazione predefinita, il contenuto è chiuso. Per espandere il contenuto durante il caricamento della pagina, utilizzare data-collapsed="false":

Esempio

<div data-role="collapsible" data-collapsed="false">
  <h1>Clicca su di me - posso ripiegarmi!</h1>
  <p>Ora sono espanso per default.</p>
</div>

Prova personalmente

Blocco pieghevole annidato

È possibile annidare contenitori di contenuto pieghevole:

Esempio

<div data-role="collapsible">
  <h1>Clicca su di me - posso ripiegarmi!</h1>
  <p>Sono il contenuto espanso.</p>
  <div data-role="collapsible">
    <h1>Clicca su di me - sono un blocco pieghevole annidato!</h1>
    <p>Sono il contenuto espanso all'interno di un blocco pieghevole annidato.</p>
  </div>
</div>

Prova personalmente

Suggerimento:I contenitori di contenuto pieghevole possono essere annidati il numero di volte desiderato.

Raccolte pieghevoli

Le raccolte pieghevoli (Collapsible sets) sono gruppi di blocchi pieghevoli (solitamente chiamati acordioni) combinati insieme. Quando un nuovo blocco viene aperto, tutti gli altri blocchi si chiudono.

Crea alcuni contenitori di contenuto, quindi impacchetta questo blocco pieghevole con un nuovo contenitore utilizzando data-role="collapsible-set":

Esempio

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Clicca su di me - posso ripiegarmi!</h1>
    <p>Sono il contenuto espanso.</p>
  </div>
  <div data-role="collapsible">
    <h1>Clicca su di me - posso ripiegarmi!</h1>
    <p>Sono il contenuto espanso.</p>
  </div>
</div>

Prova personalmente

Più esempi

Elimina le curve con l'attributo data-inset
Come rimuovere le curve dei collapsibles.
Minimizza i collapsibles con data-mini
Come rendere i collapsibles più piccoli.
Cambia l'icona con data-collapsed-icon e data-expanded-icon
Come cambiare l'icona dei collapsibles (per impostazione predefinita è + e -).