Pieghevoli blocchi di contenuto
Collapsibles consentono di nascondere o visualizzare il contenuto, che è utile per la memorizzazione di parti di informazioni.
Per creare un blocco pieghevole di contenuti, assegnare il data-role="collapsible" attributo a un contenitore. All'interno del contenitore (div) , aggiungere un'intestazione (H1-H6) o elemento leggenda, seguito da un codice HTML che si desidera essere ampliato:
Esempio
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div>
Prova tu stesso " Per impostazione predefinita, il contenuto è chiuso. Per espandere il contenuto al caricamento della pagina, l'uso data-collapsed="false" :
Esempio
<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm
now expanded by default.</p>
</div>
Prova tu stesso " Blocchi pieghevoli nidificati
i blocchi di contenuto pieghevoli possono essere nidificati (un pieghevole all'interno di un pieghevole):
Esempio
<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>
Prova tu stesso " i blocchi di contenuto pieghevoli possono essere nidificati tutte le volte che si desidera.
Imposta pieghevoli
set pieghevoli sono blocchi pieghevoli che sono raggruppati insieme (spesso indicato come una fisarmonica). Quando un nuovo blocco viene aperto, tutti gli altri blocchi vicini.
Creare diversi blocchi di contenuto pieghevoli, e poi avvolgere un nuovo contenitore con il data-role = "collapsibleset" attorno ai blocchi pieghevoli:
Esempio
<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>
Prova tu stesso " Altri esempi
popup pieghevole
Come creare un popup pieghevole.
Rimuovere angolo arrotondato con il data-inset attributo
Come rimuovere gli angoli arrotondati e aggiungere larghezza su collapsibles.
Minify collapsibles con il data-mini attributo
Come rendere collapsibles più piccoli.
Cambiare l'icona con i dati-crollato-icona e-icona dei dati espanso
Come cambiare l'icona di collapsibles (di default è + e -).
Modifica della posizione dell'icona
Come modificare la posizione icona del collapsibles (di default è a sinistra).