...

Bootstrap 4 Accordion dengan Icon Anak panah

Pertama-tama mari kita membuat card accordion dengan mengimplementasikan class .accordion dan memberikan id=accordionSaya pada elemen <div>, yang menjadi container utama.

<div class="accordion" id="accodionSaya">
  <!-- elemen div dengan class .card -->
</div>

kemudian kita menuliskan coding untuk card dengan id yang dapat menghubungkan antara header dan container body dari tiap card

<div class="card">
   <div class="card-header" id="headingCardSatu">
      <h2 class="mb-0">
         <button type="button" class="btn btn-link" data-toggle="collapse" 
                 data-target="#cardsatu">Card Satu</button>
      </h2>
   </div>
   <div id="cardsatu" class="collapse" aria-labelledby="headingCardSatu" 
        data-parent="#accordionSaya">
      <div class="card-body">
         <p>Konten Card Satu</p>
      </div>
   </div>
</div>

<!--  Card 2 -->
<div class="card">
   <div class="card-header" id="headingCardDua">
      <h2 class="mb-0">
         <button type="button" class="btn btn-link" data-toggle="collapse" 
                 data-target="#carddua">Card Dua</button>
      </h2>
   </div>
   <div id="carddua" class="collapse" aria-labelledby="headingCardDua" 
        data-parent="#accordionSaya">
      <div class="card-body">
        <p>Konten Card Dua</p>
      </div>
   </div>
</div>	

Dengan menempatkan dua card diatas dalam elemen <div> accordion sebelumnya maka kita akan mendapatkan hasil sbb:

 

Menambahkan Icon Anak Panah pada Accordion

Untuk menempatkan Icon Anak Panah pada Accordion perlu dilakukan beberapa perubahan.

1. Memuat link source CSS Icon Fontawesome

<link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous">

2. Merubah elemen button menjadi elemen hyperlink a

<h2 class="mb-0">
   <a role="button" data-toggle="collapse" 
      href="#cardsatu" aria-expanded="true" aria-controls="cardsatu">Card Satu
   </a>			      
</h2>

3. Menambahkan script CSS untuk menentukan Icon yang ingin digunakan

.mb-0 > a {
  display: block;
  position: relative;
}
.mb-0 > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.mb-0 > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}