5.6 — Collapse, accordion, carousel, scrollspy

⏱️ TL;DR — Collapse (data-bs-toggle="collapse") plie/déplie un bloc. Accordion (.accordion) est un ensemble de collapses coordonnés. Carousel (.carousel) fait défiler des slides. Scrollspy met à jour une nav selon la position de scroll. Tous fonctionnent par data-attributes (JS Bootstrap).

🎯 Objectifs

Replier/déplier du contenu.
Construire un accordéon.
Créer un carrousel avec contrôles.
Activer un scrollspy.

Collapse


<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#bloc" aria-expanded="false" aria-controls="bloc">
  Afficher / masquer
</button>
<div class="collapse" id="bloc">
  <div class="card card-body">Contenu repliable.</div>
</div>

Un déclencheur peut piloter plusieurs cibles avec un sélecteur : data-bs-target=".multi".

Accordion


<div class="accordion" id="acc">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#a1"
              aria-expanded="true">Section 1</button>
    </h2>
    <div id="a1" class="accordion-collapse collapse show" data-bs-parent="#acc">
      <div class="accordion-body">Contenu 1</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#a2"
              aria-expanded="false">Section 2</button>
    </h2>
    <div id="a2" class="accordion-collapse collapse" data-bs-parent="#acc">
      <div class="accordion-body">Contenu 2</div>
    </div>
  </div>
</div>

data-bs-parent="#acc" fait qu’ouvrir une section ferme les autres. Sans lui (ou avec .accordion-flush), les sections sont indépendantes.

Carousel


<div id="carrousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button data-bs-target="#carrousel" data-bs-slide-to="0" class="active"></button>
    <button data-bs-target="#carrousel" data-bs-slide-to="1"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active"><img src="1.jpg" class="d-block w-100" alt="…"></div>
    <div class="carousel-item"><img src="2.jpg" class="d-block w-100" alt="…"></div>
  </div>
  <button class="carousel-control-prev" data-bs-target="#carrousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" data-bs-target="#carrousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

data-bs-ride="carousel" lance le défilement auto. Légendes via .carousel-caption.

Scrollspy


<body data-bs-spy="scroll" data-bs-target="#navspy" data-bs-offset="80" tabindex="0">
  <nav id="navspy" class="nav nav-pills flex-column">
    <a class="nav-link" href="#s1">Section 1</a>
    <a class="nav-link" href="#s2">Section 2</a>
  </nav>
  <div id="s1">…</div>
  <div id="s2">…</div>
</body>

Scrollspy met à jour la classe active de la nav selon la section visible.

⚠️ Piège — Carousel : les images doivent avoir la même hauteur, sinon le carrousel « saute ». Fixez les dimensions ou utilisez object-fit: cover. Scrollspy : les href de la nav doivent correspondre exactement aux id des sections.

💡 Pour un dev React — Le carousel auto-défilant et l’accordéon reposent sur des timers et l’état du DOM. react-bootstrap fournit <Carousel> et <Accordion> pilotés par props/état — bien plus sûrs dans un arbre React qui se re-render.

✏️ Exercices

Un accordéon FAQ où une seule question est ouverte à la fois.

✅ Solution

Chaque accordion-collapse porte data-bs-parent="#acc" pointant vers le conteneur : ouvrir l’un ferme les autres.

Un bouton qui affiche/masque un panneau de filtres.

✅ Solution

data-bs-toggle="collapse" data-bs-target="#filtres" + un <div class="collapse" id="filtres">.

🧠 Quiz de révision

1. Quel attribut plie/déplie un bloc ?

data-bs-toggle="collapse" (+ data-bs-target).

2. Qu’est-ce qui rend un accordéon « exclusif » (une section à la fois) ?

data-bs-parent pointant vers le conteneur d’accordéon.

3. Quel attribut lance le défilement auto d’un carrousel ?

data-bs-ride="carousel".

4. À quoi sert scrollspy ?

À surligner l’item de nav correspondant à la section visible au scroll.

5. Comment rendre les items d’accordéon indépendants ?

Retirer data-bs-parent (ou utiliser .accordion-flush).

🎉 Fin de la Partie 5 ! Partie suivante : Partie 6 — Formulaires