Custome Accordion Bootstrap 4

14/01/2020    Risman Hakim    93     Website

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.

Bootstrap

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More