Collapse (Français)

Faites basculer la visibilité du contenu à travers votre projet avec quelques classes et nos plugins JavaScript.

Exemple

Cliquez sur les boutons ci-dessous pour afficher et masquer un autre élément via des changements de classe :

• .collapse cache le contenu
• .collapsing est appliqué pendant les transitions

.

• .collapse.show affiche le contenu

Vous pouvez utiliser un lien avec l’attribut href, ou un bouton avec l’attribut data-target. Dans les deux cas, le data-toggle="collapse" est requis.

Multiples cibles

Une <button> ou une <a> peut afficher et dissimuler plusieurs éléments en les référençant avec un sélecteur JQuery dans son attribut href ou data-target.De multiples <button> ou <a> peuvent afficher et masquer un élément s’ils le référencent chacun avec leur href ou data-target attribut

Exemple d’accordéon

En utilisant le composant carte, vous pouvez étendre le comportement de collapse par défaut pour créer un accordéon.

Accessibilité

Veillez à ajouter aria-expanded à l’élément de contrôle. Cet attribut transmet explicitement l’état actuel de l’élément pliable lié au contrôle aux lecteurs d’écran et aux technologies d’assistance similaires. Si l’élément repliable est fermé par défaut, l’attribut de l’élément de contrôle doit avoir la valeur aria-expanded="false". Si vous avez défini l’élément pliable comme étant ouvert par défaut à l’aide de la classe show, définissez aria-expanded="true" sur le contrôle à la place. Le plugin basculera automatiquement cet attribut sur le contrôle en fonction de l’ouverture ou de la fermeture de l’élément pliable (via JavaScript, ou parce que l’utilisateur a déclenché un autre élément de contrôle également lié au même élément pliable). Si l’élément HTML de l’élément de contrôle n’est pas un bouton (par ex, un <a> ou <div>), l’attribut role="button" doit être ajouté à l’élément.

Si votre élément de contrôle cible un seul élément repliable – c’est-à-dire l’attribut data-target pointe vers un sélecteur id – vous devez ajouter l’attribut aria-controls à l’élément de contrôle, contenant le id de l’élément repliable. Les lecteurs d’écran modernes et les technologies d’assistance similaires font usage de cet attribut pour fournir aux utilisateurs des raccourcis supplémentaires pour naviguer directement vers l’élément pliable lui-même.

Notez que l’implémentation actuelle de Bootstrap ne couvre pas les diverses interactions clavier décrites dans le pattern accordéon WAI-ARIA Authoring Practices 1.1 – vous devrez les inclure vous-même avec du JavaScript personnalisé.

Utilisation

Le plugin d’effondrement utilise quelques classes pour gérer le gros du travail :

• .collapse cache le contenu
• .collapse.show affiche le contenu
• .collapsing est ajoutée lorsque la transition commence, et retirée lorsqu’elle se termine

Ces classes se trouvent dans _transitions.scss.

Via les attributs de données

Il suffit d’ajouter data-toggle="collapse" et une data-target à l’élément pour attribuer automatiquement le contrôle d’un ou plusieurs éléments pliables. L’attribut data-target accepte un sélecteur CSS auquel appliquer l’effondrement. Veillez à ajouter la classe collapse à l’élément pliable. Si vous souhaitez qu’il soit ouvert par défaut, ajoutez la classe supplémentaire show.

Pour ajouter la gestion des groupes en accordéon à une zone repliable, ajoutez l’attribut de données data-parent="#selector". Reportez-vous à la démo pour voir cela en action.

Via JavaScript

Activer manuellement avec :

$('.collapse').collapse()

Options

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l’option à data-, comme dans data-parent="".

.

Méthodes

.collapse(options)

Active votre contenu comme un élément pliable. Accepte une option facultative object.

$('#myCollapsible').collapse({ toggle: false})

.collapse('toggle')

Fait basculer un élément repliable sur montré ou caché. Retourne à l’appelant avant que l’élément pliable n’ait été effectivement montré ou caché (c’est-à-dire avant que l’événement shown.bs.collapse ou hidden.bs.collapse ne se produise).

.collapse('show')

Montre un élément pliable. Retourne à l’appelant avant que l’élément pliable n’ait été réellement montré (c’est-à-dire avant que l’événement shown.bs.collapse ne se produise).

.collapse('hide')

Masque un élément pliable. Retourne à l’appelant avant que l’élément pliable n’ait été effectivement masqué (c’est-à-dire avant que l’événement hidden.bs.collapse ne se produise).

.collapse('dispose')

Détruit le collapsus d’un élément.

Evénements

La classe de collapsus deootstrap expose quelques événements pour accrocher la fonctionnalité de collapsus.

$('#myCollapsible').on('hidden.bs.collapse', function () { // do something…})

.