Pliables Blocks contenu
Pliables vous permettent de masquer ou d'afficher le contenu, ce qui est utile pour le stockage des pièces d'information.
Pour créer un bloc pliable de contenu, attribuer le data-role="collapsible" attribut à un conteneur. A l' intérieur du conteneur (div) , ajouter un en- tête (H1-H6) ou un élément de légende, suivi d'un balisage HTML que vous voulez être élargi:
Exemple
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div>
Essayez - le vous - même » Par défaut, le contenu est fermé. Pour développer le contenu chargement de la page, l' utilisation de data-collapsed="false" se sont data-collapsed="false" :
Exemple
<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm
now expanded by default.</p>
</div>
Essayez - le vous - même » Emboîtées pliables Blocks
blocs de contenu pliables peuvent être imbriqués (un pliable dans un pliable):
Exemple
<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>
Essayez - le vous - même » blocs de contenu pliables peuvent être imbriqués autant de fois que vous le souhaitez.
Ensembles pliables
ensembles pliables sont des blocs pliables qui sont regroupées (souvent désigné comme un accordéon). Quand un nouveau bloc est ouvert, tous les autres blocs près.
Créer plusieurs blocs de contenu pliables, puis envelopper un nouveau conteneur avec le data-role = "collapsibleset" autour des blocs pliables:
Exemple
<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>
Essayez - le vous - même » Autres exemples
pliable contextuel
Comment créer un popup pliable.
Retirez coin arrondi avec des données encart attribut
Comment faire pour supprimer des coins arrondis et d'ajouter toute la largeur sur pliables.
Minify pliables avec les data-mini attribut
Comment faire pliables plus petit.
Modification de l'icône avec des données affaissée-icon et les données expansées-icon
Comment changer l'icône du pliables (par défaut est + et -).
Changement de la position de l' icône
Comment changer la position de l'icône du pliables (valeur par défaut est à gauche).