Bootstrap - Référence : Une guide complète pour les débutants

Bonjour, aspirants développeurs web ! Aujourd'hui, nous allons plonger dans un des composants les plus utiles de Bootstrap : le Collapse. Imaginez-le comme un tour de magie pour vos pages web - maintenant vous le voyez, maintenant vous ne le voyez plus ! Partons ensemble dans cette aventure passionnante.

Qu'est-ce que le Bootstrap Collapse ?

Avant de nous plonger dans le code, comprenons ce qu'est le Collapse. Imaginez que vous avez un long article sur votre site web, mais que vous ne voulez pas submerger vos visiteurs avec tout le texte d'un coup. C'est là que le Collapse intervient ! Il vous permet de masquer et d'afficher du contenu avec un simple clic, rendant vos pages web plus interactives et conviviales.

Exemple de base

Commençons par un exemple de base pour nous familiariser.

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Cliquez ici pour révéler un secret !
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Le secret est... vous êtes incroyable en apprenant Bootstrap !
</div>
</div>

Décomposons cela :

1. Nous avons un bouton (stylisé comme un lien) qui déclenche le collapse.
2. L'attribut data-bs-toggle="collapse" indique à Bootstrap que cet élément contrôle une zone collapsible.
3. Le href="#collapseExample" pointe vers l'ID du contenu collapsible.
4. Le contenu collapsible est enveloppé dans un div avec la classe collapse et un ID qui correspond à l'href du bouton.

Lorsque vous cliquez sur le bouton, la magie JavaScript de Bootstrap se produit, et hop ! Votre contenu apparaît ou disparaît.

Collapse horizontal

Maintenant, ajoutons un peu de piquant avec un collapse horizontal. C'est comme si votre contenu joue à cache-cache, mais sur le côté !

<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Basculer la largeur du collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
Voici un contenu factice pour un collapse horizontal. Il est masqué par défaut et s'affiche lorsque déclenché.
</div>
</div>
</div>

Les différences clés ici sont :

1. Nous utilisons la classe collapse-horizontal en plus de collapse.
2. Nous avons défini une largeur spécifique sur le contenu collapsible.
3. Le div externe avec min-height assure que les autres éléments ne bougent pas lorsque le collapse est basculé.

Multiples toggles et cibles

Maintenant, créons une symphonie d'éléments collapsibles ! Nous pouvons avoir plusieurs boutons contrôlant différents (ou les mêmes) zones collapsibles.

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Basculer le premier élément</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Basculer le second élément</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Basculer les deux éléments</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Un contenu factice pour le premier composant de collapse de cet exemple multiple.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Un contenu factice pour le second composant de collapse de cet exemple multiple.
</div>
</div>
</div>
</div>

Voici ce qui se passe :

1. Nous avons trois boutons : deux contrôlent des collapses individuels, et un contrôle les deux.
2. Le troisième bouton utilise .multi-collapse pour cibler les deux zones collapsibles.
3. Chaque zone collapsible a à la fois un ID unique et la classe multi-collapse.

Accessibilité

En tant que développeurs responsables, nous devons nous assurer que nos sites web sont accessibles à tous. Le composant Collapse de Bootstrap vient avec des fonctionnalités d'accessibilité intégrées, mais nous pouvons les améliorer :

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#accessibleCollapse" aria-expanded="false" aria-controls="accessibleCollapse">
Bouton Collapse Accessible
</button>

<div class="collapse" id="accessibleCollapse">
<div class="card card-body">
Ce contenu est masqué mais accessible aux lecteurs d'écran.
</div>
</div>

Les fonctionnalités d'accessibilité clés :

1. L'attribut aria-expanded indique aux lecteurs d'écran si le contenu collapsible est actuellement visible.
2. L'attribut aria-controls associe le bouton au contenu collapsible.

Tableau des méthodes

Voici un tableau pratique des méthodes de Collapse que vous pouvez utiliser dans votre JavaScript :

Méthode	Description
collapse('toggle')	Bascule un élément collapsible
collapse('show')	Affiche un élément collapsible
collapse('hide')	Masque un élément collapsible
collapse('dispose')	Détruit le collapse d'un élément

Pour utiliser ces méthodes, vous feriez quelque chose comme :

var myCollapsible = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapsible, {
toggle: false
})
bsCollapse.show()

Et voilà, les amis ! Vous avez maintenant maîtrisé l'art du Bootstrap Collapse. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces exemples. Avant de savoir dire ouf, vous serez à créer des pages web qui s'ouvrent et se ferment comme des origamis !

Bonne programmation, et que vos collapses soient toujours fluides et vos toggles toujours réactifs !

Credits: Image by storyset