Accordion Bootstrap

Accordion-flush Bootstrap

Source : https://getbootstrap.com/docs/5.3/components/accordion/

Créer des accordéons rétractables verticalement grâce au plugin JavaScript « Collapse ».

Mon texte 1.Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.

Mon texte 2.Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.

Mon texte 3. Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.

<div class="accordion" id="accordionExample">
                          <div class="accordion-item">
                            <h2 class="accordion-header">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                Texte  #1
                              </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                              <div class="accordion-body">
                                <strong>Mon texte 1.</strong>Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.
                        
                              </div>
                            </div>
                          </div>
                          <div class="accordion-item">
                            <h2 class="accordion-header">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Texte #2
                              </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                              <div class="accordion-body">
                                <strong>Mon texte 2.</strong>Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.
                        
                              </div>
                            </div>
                          </div>
                          <div class="accordion-item">
                            <h2 class="accordion-header">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Texte #3
                              </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                              <div class="accordion-body">
                                <strong>Mon texte 3.</strong> Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.
                        
                              </div>
                            </div>
                          </div>
                        </div>

Ajoutez .accordion-flush pour supprimer certaines bordures et coins arrondis afin de rendre les accordéons bord à bord avec leur conteneur parent.

<div class="accordion" id="accordionExample">
                          <div class="accordion-item">
                            <h2 class="accordion-header">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                Texte  #1
                              </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                              <div class="accordion-body">
                                <strong>Mon texte 1.</strong>Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.
                        
                              </div>
                            </div>
                          </div>
                          <div class="accordion-item">
                            <h2 class="accordion-header">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Texte #2
                              </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                              <div class="accordion-body">
                                <strong>Mon texte 2.</strong>Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.
                        
                              </div>
                            </div>
                          </div>
                          <div class="accordion-item">
                            <h2 class="accordion-header">
                              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Texte #3
                              </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                              <div class="accordion-body">
                                <strong>Mon texte 3.</strong> Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.
                        
                              </div>
                            </div>
                          </div>
                        </div>

Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.

Pour afficher un accordéon développé par défaut :
Ajoutez la classe .show à l'élément .accordion-collapse.
Supprimez la classe .collapsed de l'élément .accordion-button.
Définissez son attribut aria-expanded sur true.

Omettez l'attribut data-bs-parent sur chaque .accordion-collapse pour que les éléments d'accordéon restent ouverts lorsqu'un autre élément est ouvert.

Mon texte 2. Lorem ipsum dolor sit amet. Id enim voluptas non reiciendis architecto quo dolores voluptatem eum soluta ullam. A suscipit placeat qui dignissimos asperiores aut placeat quas est neque reiciendis qui illo fugiat eos aperiam molestias rem quis delectus.

Validation W3C

Slider et Image

Accordion

Divers 1

Divers 2

Mascarade

Lumière

Couché de soleil

Le Crozon

Créer des accordéons rétractables verticalement grâce au plugin JavaScript « Collapse ».

Texte #1

Texte #2

Texte #3

Texte #1

Texte #2

Texte #3

Texte #1

Texte #2

Texte #3