CSS EKsperimen - 04-2 Accordion

1. Accordion
Eksperimen CSS
Kuliahkita - Georgius Rinaldo
dodo@kuliahkita.com

2. Pendahuluan
Sebelumnya telah dibahas penggunaan tab untuk menampilkan
informasi yang dapat dikategorikan dalam satu kelompok.
Pada materi kali ini, Kita juga akan membahas cara penampilan
informasi lainnya, hanya dengan cara yang berbeda yaitu dengan
menggunakan Accordion.

3. Kelakuan Accordion
Accordion akan “membuka” informasi pada container dari sebuah tab
yang dipilih. Tambahan lainnya adalah, CSS akan menutup container
lainnya yang tidak dipilih ketika user telah memilih sebuah tab.
Terbuka
Tertutup
Tertutup

4. HTML
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="accordion-1">Hewan</a>
<div id="accordion-1" class="accordion-section-content">
<p>Kucing, Anjing, Hamster, Ikan</p>
</div>
</div>
<div class="accordion-section">
<a class="accordion-section-title" href="accordion-2">Tanaman</a>
<div id="accordion-2" class="accordion-section-content">
<p>Mawar, Anggrek, Melati, Jati, Pinus, Jamur</p>
</div>
</div>
</div>
Implementasi Tab - 1
Pertama Kita buat dulu kerangka kodenya HTML-nya sebelum diberi
style.

5. HTML
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="accordion-1">Hewan</a>
<div id="accordion-1" class="accordion-section-content">
<p>Kucing, Anjing, Hamster, Ikan</p>
</div>
</div>
...
</div>
Implementasi Tab - 2
Dapat diperhatikan bahwa terdapat container keseluruhan, dan elemen
accordion yang dibungkus dalam kelas accordion-section. Dalam
sebuah section terdiri dari 2 bagian yaitu judul dan konten yang dapat
dilihat pada kode HTML.

6. CSS
/* ======== Accordion ========*/
.accordion, .accordion* {
box-sizing: border-box;
}
.accordion{
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
border-radius: 3px;
background: #e0e0e0;
}
Implementasi Tab - 3
Pertama Kita buat style general
dari accordion tersebut terlebih
dahulu yang mencakup seperti
pada kode di sebelah.
Hasil sementara hanya akan
berupa tampilan sederhana dari
tumpukan tag div.

7. Implementasi Tab
Hasil sementara dapat dilihat pada gambar berikut:
→ Dapat dilihat bahwa hasil hanya berupa tampilan biasa dari
beberapa tag div dengan style yang ada.

8. CSS
/* ======== Section-Title ========*/
.accordion-section-title {
width: 100%;
padding: 15px;
display: inline-block;
border-bottom: 1px solid #1a1a1a;
background: #2F5B2F;
transition: all linear 0.15s;
font-size: 1.2em;
text-shadow: 0px 1px 0px #1a1a1a;
color: #fff;
}
Implementasi Tab - 4
Beri style untuk section title dari
elemen accordion.
Beri juga transition untuk
memperhalus animasi yang akan
dilakukan interaksi seperti hover.

9. CSS
.active, .accordion-section-title:hover {
background: #338570;
text-decoration: none;
}
.accordion-section:last-child .accordion-
section-title {
border-bottom: none;
}
/* ======== Section Content ========*/
.accordion-section-content {
padding: 15px;
display: none;
}
Implementasi Tab - 5
Definisikan juga kelakuan dari
judul accordion ketika mouse ada
di dalam elemen tersebut, juga
kelakuan ketika elemen tersebut
sedang dipilih oleh user.
Lalu sembunyikan semua
konten di awal dengan
mendefinisikan display: none
pada konten elemen accordion.

10. Implementasi Tab
Hasil sementara dapat dilihat pada gambar berikut:
→ Dapat dilihat bahwa accordion sudah terbentuk, tetapi masih belum
bisa dipakai karena belum ada script yang menangani interaksi antara
user dan elemennya.

11. Javascript (JQuery)
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_accordion_section();
} else {
close_accordion_section();
$(this).addClass('.active');
$('.accordion' + 'currentAttrValue').slideDown(300).addClass('open');
}
e.preventDefault();
});
});
Implementasi Tab - 6

12. Implementasi Tab - 7
Penjelasan Javascript (Jquery):
1. Fungsi pertama yang didefinisikan adalah untuk menutup semua elemen
accordion yang ada
2. Fungsi kedua yang didefinisikan adalah untuk menangani klik dari
pengguna
o Saat pengguna mengklik judul elemen accordion, script akan
menyimpan atribut href yang ada dalam judul dan melakukan
pemeriksaan serta mengoper atribut elemen yang akan dibuka.
i. Apabila elemen yang diklik telah terbuka, maka lakukan
pentutupan semua dengan memanggil fungsi pertama
ii. Apabila elemen belum terbuka, maka tutup semua elemen, dan
buka elemen yang terpilih (diklik)

13. Finalisasi
Setelah accordion telah selesai dibuat, Anda bisa mengubah dan
menyesuaikannya sesuai dengan selera Anda.
Anda bisa menambah menu, mengubah warna, ukuran, dll sesuai
kreativitas Anda.
Contoh dapat dilihat pada Codepen Kuliahkita