Custome Accordion Bootstrap 4

Custome Accordion Bootstrap 4 - Pada tutorial DUMET School sebelumnya telah dibahas tutorial tentang Custome Slider Carousel Bootstrap 4. Pada kesempatan kali ini, saya akan bagikan lagi tutorial bootstrap sederhana yakni Custome Accordion Bootstrap 4. buat kalian yang belum tahu accordion itu apa, accordion merupakan komponen dari bootstrap untuk menampilkan konten teks panjang yang bisa disembunyikan dengan cara diklik pada panel judul accordion. Pada tutorial ini, saya akan mencoba sedikit custom accordion. Buat kalian yang ingin mencoba silahkan ikuti langkah-langkahnya berikut ini.

Langkah pertama untuk membuat komponen accordion, tentunya kalian persiapkan dulu file bootstrap-nya. Lalu, kalian bisa tambahkan sintak untuk membuat komponen accordion-nya pada file index.html seperti berikut.

<div class="container mt-5">
    <div id="accordion">
      <div class="card">
        <div class="card-header pl-md-0" id="headingOne">
          <h5 class="mb-0">
            <a href="#collapseOne" class="d-inline" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              2019
              <span class="float-right" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
            </a>
          </h5>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body pl-lg-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat atque repellendus cum similique, necessitatibus, voluptatibus fugit magnam ea mollitia. Omnis facilis rerum ad autem suscipit explicabo saepe magnam totam amet!</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header pl-md-0" id="headingTwo">
          <h5 class="mb-0">
            <a href="#collapseTwo" class="d-inline" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              2018
              <span class="float-right" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
            </a>
          </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body pl-lg-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat atque repellendus cum similique, necessitatibus, voluptatibus fugit magnam ea mollitia. Omnis facilis rerum ad autem suscipit explicabo saepe magnam totam amet!</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header pl-md-0" id="headingThree">
          <h5 class="mb-0">
            <a href="#collapseThree" class="d-inline" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              2017
              <span class="float-right" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
            </a>
          </h5>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
          <div class="card-body pl-lg-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat atque repellendus cum similique, necessitatibus, voluptatibus fugit magnam ea mollitia. Omnis facilis rerum ad autem suscipit explicabo saepe magnam totam amet!</p>
          </div>
        </div>
      </div>
    </div>
</div>

Setelah komponen accordion telah diketikkan, langkah selanjutnya adalah tambahkan sintak CSS untuk mengubah tampilan dari komponen accordion bootstrap. Silahkan kalian ketikkan sintak CSSnya berikut ini.

  body {
    font-family: "sans-serif";
  }
  .card .card-header a[aria-expanded=true] .fas.fa-chevron-right {
     transform: rotate(90deg);
     transition: transform 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .card .card-header a .fas.fa-chevron-right {
     transition: transform 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .card-header {
      border-bottom: 2px solid rgba(0,0,0,.125);
  }
  .card .fas.fa-chevron-right {
    font-size: 16px;
  }
  .card-body p {
    font-size: 18px;
    line-height: 32px;
  }
  .card a{
    color: black;
  }
  .jml-artikel {
    font-size: 12px;
  }
  .card {
    margin-top: 1rem;
    border: unset;
    border-radius: unset;
  }
  .card-header {
    background-color: unset;
  }

Langakah terakhir, silahkan kalian simpan file-nya kemudian buka browser masing-masing dan lihat hasilnya.

Bagaimana? Cukup menarik bukan tampilan accordion-nya? Karena terlihat berbeda dari accordion biasanya. Baiklah cukup sekian tutorial sederhana bootstrap tentang Custome Accordion Bootstrap 4, semoga bermanfaat. Selamat mencoba dan sampai jumpa ditutorial DUMET School selanjutnya.

14 Januari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat