Créer un élément qui collapse
Pour créer un élément qui va pouvoir être caché / affiché lors d’un clic sur un autre élément, on va déjà ajouter la classe .collapse à cet élément. Nous allons également lui ajoute un id.
Ensuite, on va créer l’élément qui va déclencher la disparition / l’apparition du premier élément. Cet élément pourra être un bouton ou un élément de lien. On va lui passer un attribut data-toggle="collapse".
Finalement, nous allons lier nos deux éléments ensemble en ajoutant un attribut data-target avec la valeur de l’id à notre bouton ou un attribut href avec cette même valeur à notre lien.
Notez que les éléments qui collapsent ne seront pas affichés par défaut. Pour les afficher, on peut leur ajouter la classe .show.
See the Pen
Bootstrap 6.3.1 by Pierre (@pierregiraud)
on CodePen.
Créer un accordéon avec les composants card et collapse
On va également pouvoir utiliser les composants collapse et card ensemble pour créer des accordéons. Pour cela, on utilisera également la classe .accordion sur notre conteneur principal.
Code :
See the Pen
Bootstrap 6.3.2 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 6.3.2 by Pierre (@pierregiraud)
on CodePen.
