Kodulehe loomine, 20. kord

Bootstrap 5, akordion

Akordion selline kujunduselement, kus nähtav on kõigi erinevate osade pealkirjad ja korraga ühe osa sisu. Bootstrap 5 on võimalik akordioni luua järgmiselt:

<div class="accordion" id="accordionNaide">

 <div class="accordion-item">
  <h2 class="accordion-header" id="pealkiri1">
   <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#kokku1" aria-expanded="true" aria-controls="kokku1">
    Osa #1 pealkiri
   </button>
  </h2>
  <div id="kokku1" class="accordion-collapse collapse show" aria-labelledby="pealkiri1" data-bs-parent="#accordionNaide">
   <div class="accordion-body">
    1. osa sisu, kuvatakse automaatselt
   </div>
  </div>
 </div>

 <div class="accordion-item">
  <h2 class="accordion-header" id="pealkiri2">
   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kokku2" aria-expanded="false" aria-controls="kokku2">
    Osa #2 pealkiri
   </button>
  </h2>
  <div id="kokku2" class="accordion-collapse collapse" aria-labelledby="pealkiri2" data-bs-parent="#accordionNaide">
   <div class="accordion-body">
    2. osa sisu, mis on vaikimisi peidetud.   
   </div>
  </div>
 </div>

 <div class="accordion-item">
  <h2 class="accordion-header" id="pealkiri3">
   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kokku3" aria-expanded="false" aria-controls="kokku3">
    Osa #3 pealkiri
   </button>
  </h2>
  <div id="kokku3" class="accordion-collapse collapse" aria-labelledby="pealkiri3" data-bs-parent="#accordionNaide">
   <div class="accordion-body">
    3. osa sisu, mis on vaikimisi peidetud. 
   </div>
  </div>
 </div>
</div>

Kõik elemendid on klassist accordion-item, mis omakorda sisaldab kaht osa: 1. accordion-header ja 2. accordion-body. Need on omavahel seotud identifikaatoritega vastavalt pealkiri1 ja kokku1, pealkiri2 ja kokku2, pealkiri3 ja kokku3. Lisaks on nende kõigi ühine ülemise taseme element accordionNaide.