Tutorial Membuat Accordion Menggunakan CSS3

Ada banyak variasi dari akordion yang dibuat hanya dengan CSS saja, sebagian besar dibuat menggunakan pseudo-class :target. Masalah dengan menggunakan :target adalah kita tidak benar-benar bisa menutup bagian kontennya lagi atau memiliki beberapa bagian yang terbuka bersamaan. Dengan menggunakan checkbox yang disembunyikan(hidden), kita dapat mengontrol terbuka atau tertutupnya bagian konten. Atau, kita juga bisa menggunakan radiobox jika hanya 1 bagian konten yang ingin kita buka. Kali ini, kita akan mencoba menggunakan checkbox. mari kita mulai..

Harap dicatat: hasil dari tutorial ini hanya akan bekerja pada browser yang support CSS3 ya. Jadi bagi kalian yang mencobanya pada IE9 atau dibawahnya, mungkin akan ada beberapa yang tidak berfungsi.

Untuk hasilnya kalian bisa lihat disini.

Markup HTML

Kita akan menggunakan contoh checkbox dimana bagian kontennya terbuka secara default/otomatis (‘checked’ pada checkbox) semuanya akan kita bungkus(wrap) dengan class ac-container. Untuk setiap item akan memiliki checkbox, label, dan artikel yang merupakan bagian konten dari item tersebut:

<section class="ac-container">
  <div>
    <input id="ac-1" name="accordion-1" type="checkbox" checked />
    <label for="ac-1">Tentang Kami</label>
    <article class="ac-small">
      <p>Konten.... </p>
    </article>
  </div>
  <div>
    <input id="ac-2" name="accordion-1" type="checkbox" />
    <label for="ac-2">Bagaimana Kami Bekerja</label>
    <article class="ac-small">
      <p>Konten.... </p>
    </article>
  </div>
  <div>
    <input id="ac-3" name="accordion-1" type="checkbox" />
    <label for="ac-3">Referensi</label>
    <article class="ac-small">
      <p>Konten.... </p>
    </article>
  </div>
  <div>
    <input id="ac-4" name="accordion-1" type="checkbox" />
    <label for="ac-4">Kontak Kami</label>
    <article class="ac-small">
      <p>Konten.... </p>
    </article>
  </div>
</section>

Perhatikan bahwa kita perlu memberikan ID pada setiap input yang akan kita gunakan untuk atribut label. Kita perlu ini untuk memeriksa checkbox ketika mengklik label.

Setiap artikel akan memiliki class yang akan membantu kita menentukan tinggi yang akan kita tambah. (Secara optional, kita bisa menggunakan ‘auto’ sebagai nilai tinggi yang ditambah, tapi sayangnya itu tidak akan memiliki animasi seperti itu).

Mari kita liat Stylenya.

CSS

Mari kita definisikan lebar untuk accordion:

.ac-container{
  width: 400px;
  margin: 10px auto 30px auto;
}

Selanjutnya, kita akan membuat label sebagai tombol yang dapat kita klik. Kita juga akan mengatur z-index ke 20, untuk memastikan itu berada di atas bagian konten:

.ac-container label{
  font-family: 'Segoe UI';
  padding: 5px 20px;
  position: relative;
  z-index: 20;
  display: block;
  height: 30px;
  cursor: pointer;
  color: white;
  line-height: 33px;
  font-size: 19px;
  background: #3498db;
  border: 1px solid #bdc3c7;
}

Pada saat dihover, kita akan buat label menjadi berwarna biru sedikit gelap:

.ac-container label:hover{
  background: #2980b9;
}

Ketika kita klik pada label, checkbox menjadi checked dan ketika itu terjadi kita buat style label yang terpilih tadi dengan style ‘selected’ seperti ini:

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
  background: #2980b9;
  color: white;
}

Seperti yang kalian lihat, kita menggunakan combinator yang berdekatan untuk memilih label karena langsung didahului oleh input checkbox.

Mari kita tambakan  ikon arrow kecil pada saat dihover. Untuk itu kita hanya akan menggunakan pseudo-class ‘after’ sehingga tidak usah menambahkan markup yang tidak dibutuhkan:

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  right: 13px;
  top: 7px;
  background: transparent url(arrow_down.png) no-repeat center center;	
}

untuk ‘selected’ item, kita tambahkan icon arrow yang menunjuk ke atas:

.ac-container input:checked + label:hover:after{
  background-image: url(arrow_up.png);
}

Dan karena kita tidak ingin input ditampilkan, kita akan menyembunyikannya:

.ac-container input{
  display: none;
}

 Area konten akan memiliki tinggi awal 0px dan setiap overflow akan kita hidden. Kita juga akan menambahkan transisi untuk tinggi kotaknya. Transisi yang kita tambahkan disini akan bertindak ‘closing'(menutup) item. Kita mendefinisikan transisi yang lain untuk item yang dipilih. Jadi pada dasarnya kita dapat mengontrol dua action dengan melakukan ini. Seperti yang kalian lihat, kami akan membuat transisi menutup sedikit lebih cepat dari pada saat membuka.

.ac-container article{
  background: white;
  margin-top: -1px;
  overflow: hidden;
  height: 0px;
  position: relative;
  z-index: 10;
  transition: 
    height 0.3s ease-in-out, 
    box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
  transition: 
    height 0.5s ease-in-out, 
    box-shadow 0.1s linear;
  border: 1px solid rgba(155,155,155,0.3);
}

Mari kita beri sedikit style pada konten:

.ac-container article p{
  font-style: italic;
  color: #777;
  line-height: 23px;
  font-size: 14px;
  padding: 20px;
}

Sekarang kita beri tinggi area konten, animasi dari transisi akan seukuran tinggi ini:

.ac-container input:checked ~ article.ac-small{
  height: 140px;
}

Seperti yang telah disebutkan, tinggi ‘auto’ tentunya menjadi pilihan terbaik disini, tapi karena kita tidak dapat mambuat animasi pada itu, kita perlu mengatur beberapa tinggi untuk transisinya.

Dengan begitu selesailah proses pembuatan accordionnya, Silahkan lihat hasilnya disini.

Dan demikianlah Tutorial membuat accordion menggunakan CSS3. Saya harap kalian menikmatinya. Terima Kasih…

Comments

comments