1. Structure HTML :
- Créez un élément conteneur avec la classe `container` où vous placerez votre contenu pliable.
- Dans l'élément `container`, ajoutez un élément `` qui fera office de bouton bascule de réduction. - Sous le bouton bascule, ajoutez un élément `` qui contiendra le contenu réductible. Assurez-vous d'ajouter la classe `collapse` et un attribut `id` à ce ``, tel que `collapseExample`. 2. Classes CSS : - Incluez le fichier CSS Bootstrap sur votre page Web. - Ajoutez les classes CSS suivantes : - Classe `collapse` au contenu réductible ``. - Classe `show` au contenu réductible `` pour l'afficher initialement (facultatif). - Classe `collapsed` au bouton bascule `` pour indiquer l'état réduit initialement (facultatif). 3. JavaScript : - Incluez le fichier JavaScript Bootstrap sur votre page Web. - Ajoutez le script suivant : ```javascript // Sélectionnez le bouton bascule et les éléments de contenu pliables const toggleBtn =document.querySelector('.toggle-btn'); const collapsibleContent =document.getElementById('collapseExample'); // Ajout d'un écouteur d'événement au bouton bascule toggleBtn.addEventListener('clic', function() { // Bascule la classe "show" sur le contenu pliable collapsibleContent.classList.toggle('show'); // Basculez la classe "réduit" sur le bouton bascule toggleBtn.classList.toggle('collapsed'); }); ``` Ce script gérera la fonctionnalité réduire/développer lorsque le bouton bascule est cliqué. En suivant ces étapes, vous pouvez facilement créer un élément pliable à l'aide de Bootstrap 5.
- Sous le bouton bascule, ajoutez un élément `
2. Classes CSS :
- Incluez le fichier CSS Bootstrap sur votre page Web.
- Ajoutez les classes CSS suivantes :
- Classe `collapse` au contenu réductible `
- Classe `show` au contenu réductible `
- Classe `collapsed` au bouton bascule `` pour indiquer l'état réduit initialement (facultatif). 3. JavaScript : - Incluez le fichier JavaScript Bootstrap sur votre page Web. - Ajoutez le script suivant : ```javascript // Sélectionnez le bouton bascule et les éléments de contenu pliables const toggleBtn =document.querySelector('.toggle-btn'); const collapsibleContent =document.getElementById('collapseExample'); // Ajout d'un écouteur d'événement au bouton bascule toggleBtn.addEventListener('clic', function() { // Bascule la classe "show" sur le contenu pliable collapsibleContent.classList.toggle('show'); // Basculez la classe "réduit" sur le bouton bascule toggleBtn.classList.toggle('collapsed'); }); ``` Ce script gérera la fonctionnalité réduire/développer lorsque le bouton bascule est cliqué. En suivant ces étapes, vous pouvez facilement créer un élément pliable à l'aide de Bootstrap 5.
3. JavaScript :
- Incluez le fichier JavaScript Bootstrap sur votre page Web.
- Ajoutez le script suivant :
```javascript
// Sélectionnez le bouton bascule et les éléments de contenu pliables
const toggleBtn =document.querySelector('.toggle-btn');
const collapsibleContent =document.getElementById('collapseExample');
// Ajout d'un écouteur d'événement au bouton bascule
toggleBtn.addEventListener('clic', function() {
// Bascule la classe "show" sur le contenu pliable
collapsibleContent.classList.toggle('show');
// Basculez la classe "réduit" sur le bouton bascule
toggleBtn.classList.toggle('collapsed');
});
```
Ce script gérera la fonctionnalité réduire/développer lorsque le bouton bascule est cliqué.
En suivant ces étapes, vous pouvez facilement créer un élément pliable à l'aide de Bootstrap 5.
