Créer un effondrement avec Bootstrap 5 implique d'utiliser la classe `.collapse` et l'attribut `data-bs-toggle="collapse"`. Voici un guide étape par étape :
1. Créez l'élément bascule :
- Ajoutez un bouton ou tout élément qui servira de bascule pour ouvrir et fermer le repli.
- Donnez à l'élément bascule l'attribut `data-bs-toggle="collapse"`.
- Attribuez une valeur d'attribut `data-bs-target` unique qui correspond à l'ID de l'élément que vous souhaitez réduire ou développer.
2. Créez l'élément pliable :
- Créez l'élément que vous souhaitez afficher ou masquer lorsque vous cliquez sur la bascule.
- Donnez à cet élément la classe `.collapse` et l'ID qui correspond à la valeur `data-bs-target` de l'élément toggle.
3. Ajouter des classes facultatives :
- Bootstrap 5 fournit des classes supplémentaires pour contrôler l'apparence du collapsus, telles que :
- `.show` :Cette classe est utilisée pour afficher initialement l'élément pliable.
- `.collapse-horizontal` :Cette classe vous permet de créer un repli horizontal au lieu d'un vertical.
4. Inclure le CSS et le JavaScript Bootstrap :
- Assurez-vous d'inclure les fichiers Bootstrap CSS et JavaScript dans votre document HTML pour activer la fonctionnalité de réduction.
Voici un exemple de code HTML pour créer un repli :
