jQuery Mobile Blocs repliables
Blocs de contenu repliables
Les blocs repliables vous permettent de masquer ou d'afficher du contenu - utile pour stocker certaines informations.
Pour créer un bloc de contenu repliable, ajoutez l'attribut data-role="collapsible" au conteneur. À l'intérieur du conteneur (div), ajoutez un élément de titre (H1-H6), suivi du balisage HTML que vous souhaitez développer:
Exemple
<h1>Cliquez-moi - je peux me replier!</h1>
<p>Je suis un contenu repliable.</p>
</div>
Essayez-le vous-même »
Par défaut, le contenu est replié. Pour développer le contenu lors du chargement de la page, utilisez data-collapsed="false":
Exemple
<h1>Cliquez-moi - je peux me replier!</h1>
<p>Je suis maintenant déplié par défaut.</p>
</div>
Essayez-le vous-même »
Blocs pliables imbriqués
Les blocs de contenu pliables peuvent être imbriqués les uns dans les autres :
Exemple
<h1>Cliquez-moi - je peux me replier!</h1>
<p>Je suis le contenu déplié.</p>
<div data-role="collapsible">
<h1>Cliquez sur moi - je suis un bloc pliable imbriqué !</h1>
<p>Je suis le contenu déplié à l'intérieur du bloc pliable imbriqué.</p>
</div>
</div>
Essayez-le vous-même »
 |
Les blocs de contenu pliables peuvent être imbriqués autant de fois que nécessaire. |
|---|
Ensembles pliables
Un ensemble pliable regroupe des blocs pliables (comme un accordéon). Lorsqu'un nouveau bloc est déplié, tous les autres blocs sont repliés.
Créez plusieurs blocs de contenu pliables, puis enveloppez les blocs de contenu pliables dans un nouveau conteneur avec data-role="collapsible-set" :
Exemple
<div data-role="collapsible">
<h1>Cliquez-moi - je peux me replier!</h1>
<p>Je suis le contenu déplié.</p>
</div>
<div data-role="collapsible">
<h1>Cliquez-moi - je peux me replier!</h1>
<p>Je suis le contenu déplié.</p>
</div>
</div>
Essayez-le vous-même »
Plus d’exemples
Supprimer les coins arrondis et les marges avec l'attribut data-inset
Comment supprimer les coins arrondis et les marges des blocs repliables.
Comment rendre les blocs repliables plus petits.
Changer les icônes avec data-collapsed-icon et data-expanded-icon
Comment changer les icônes des blocs repliables (par défaut : + et -).
Créer des éléments repliables dans une popup.
Comment modifier la position de l'icône dans les éléments repliables (par défaut : à gauche).