Onglets jQuery Mobile

Blocs de contenu déroulables

Les déroulables (Collapsibles) vous permettent de masquer ou d'afficher du contenu - cela est utile pour stocker des informations partielles.

Pour créer un bloc de contenu déroulable, attribuez l'attribut data-role="collapsible" à un conteneur. Dans le conteneur (div), ajoutez un élément de titre (h1-h6), suivi de l'HTML que vous souhaitez étendre :

Exemple

<div data-role="collapsible">
  <h1>Cliquez sur moi - Je peux être replié !</h1>
  <p>Je suis le contenu déroulable.</p>
</div>

Essayer personnellement

Par défaut, le contenu est fermé. Si vous souhaitez étendre le contenu au chargement de la page, utilisez data-collapsed="false":

Exemple

<div data-role="collapsible" data-collapsed="false">
  <h1>Cliquez sur moi - Je peux être replié !</h1>
  <p> Maintenant, je suis par défaut déployé.</p>
</div>

Essayer personnellement

Blocs déroulables imbriqués

Les blocs de contenu déroulables imbriqués peuvent être utilisés :

Exemple

<div data-role="collapsible">
  <h1>Cliquez sur moi - Je peux être replié !</h1>
  <p>Je suis le contenu déployé.</p>
  <div data-role="collapsible">
    <h1>Cliquez sur moi - Je suis un bloc déroulable imbriqué !</h1>
    <p>Je suis le contenu déployé dans un bloc déroulable imbriqué.</p>
  </div>
</div>

Essayer personnellement

Astuce :Les blocs de contenu déroulables peuvent être imbriqués jusqu'à l'heure que vous souhaitez.

Ensemble de blocs déroulables

Les ensembles de blocs déroulables (Collapsible sets) font référence aux blocs déroulables combinés (souvent appelés accordéon). Lorsque un nouveau bloc est ouvert, tous les autres blocs se ferment.

Créez plusieurs blocs de contenu, puis enveloppez ce bloc déroulable avec un nouveau conteneur en utilisant data-role="collapsible-set":

Exemple

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Cliquez sur moi - Je peux être replié !</h1>
    <p>Je suis le contenu déployé.</p>
  </div>
  <div data-role="collapsible">
    <h1>Cliquez sur moi - Je peux être replié !</h1>
    <p>Je suis le contenu déployé.</p>
  </div>
</div>

Essayer personnellement

Plus d'exemples

Supprimer les arrondis via l'attribut data-inset
Comment supprimer les arrondis sur les collapsibles.
Minimiser les collapsibles via data-mini
Comment rendre les collapsibles plus petits.
Changer les icônes via data-collapsed-icon et data-expanded-icon
Comment changer les icônes des collapsibles (par défaut, ce sont + et -).