Membuat Spoiler Atau Collapsible Content Menggunakan ‘Accordion’


Accordion adalah istilah yang biasa digunakan untuk menyebut atau menggambarkan sebuah konten yang bisa disembunyikan atau dimunculkan (collapsible) dengan sebuah interaksi. Dengan accordion, halaman website atau posting blog bisa lebih ringkas dan interaktif, tetapi ada baiknya tidak digunakan secara berlebihan.

Accordion biasanya lebih sering digunakan sebagai sebuah spoiler atau untuk menampilkan konten dimana kemungkinan pembaca tidak ingin mengetahui isinya, misalnya spoiler sebuah film yang baru saja ditayangkan. Sehingga pembaca bisa memilih untuk membaca spoiler atau tidak ingin membacanya supaya tidak merusak keseruan saat menonton filmnya.

Contoh lain penggunaan accordion sering kita jumpai pada halaman-halaman wikipedia saat dibuka melalui mobile device, dimana pembahasannya dibagi menjadi beberapa bagian atau topik yang diringkas dalam sebuah accordion supaya tidak terlalu banyak scrolling bila ingin membaca bagian-bagian tertentu saja.

Sekarang kita akan membahas mengenai pembuatan accordion dengan cara yang berbeda, meskipun pada dasarnya sama seperti membuat spoiler dengan HTML, JS dan CSS sederhana (baca: Membuat Sendiri Spoiler Tanpa Framework). Di sini bagian-bagian script akan dipisahkan dalam sebuah accordion, sekaligus sebagai contoh.

Kode HTML untuk satu elemen accordion

<button onClick = “accordion(‘acc01’)”>Section 02</button>
<div id=”acc01″ class=”accordion-content”>
<h4>Section 1 title</h4>
<p>This is section 02 content</p>
</div>

Perhatikan, pada elemen button dan div memiliki ID yang sama yang akan digunakan sebagai identitas untuk javascript sehingga tidak perlu menggunakan array bila terdapat banyak tombol. Penamaan ID ini bebas.

Perlu diperhatikan juga bahwa dalam accordion hanya boleh ada dua elemen (tag H4 dan P pada contoh di atas). Bila ada banyak elemen, misalnya banyak paragraf menggunakan <p> tag, maka harus dimasukkan dalam satu elemen <div>

Kode CSS untuk accordion

.accordion {
max-width: 800px;
width: 100%;
margin: auto;
}

.accordion button{
border: none;
background-color: #000;
color: #fff;
cursor: pointer;
padding: 6px 0;
margin: 3px 0;
width: 100%;
}

.accordion button:hover {
background-color: #555;
}

.accordion-content {
display: none;
}

.accordion-show {
border-style: solid;
border-width: 1px;
background-color: #ddd;
}

Yang perlu diperhatikan dari kode CSS di atas adalah kode css untuk button. Bila tidak menggunakan CSS, maka tampilan button akan menjadi tampilan standart sebuah tombol, kode di atas untuk mengubah tampilan tombol sesuai dengan selera kita.

Perhatikan pula class .accordion-content dan .accordion-show. Pada kode HTMLnya hanya menggunakan class .accordion-content dimana class ini nantinya akan diubah menjadi .accordion-show untuk menampilkan isi dari accordion dan akan dikembalikan menjadi .accordion-content untuk menyembunyikan isi accordion menggunakan javascript.

Kode Javascript untuk button

<script>
function accordion(id) {

var x = document.getElementById(id);

if (x.className.indexOf(“accordion-show”) == -1) {
x.className = x.className.replace(“accordion-content”, “accordion-show”)

} else {
x.className = x.className.replace(“accordion-show”, “accordion-content”)
}

}
</script>

Pada kode javascript di atas, fungsi if akan mendeteksi apakah ada class yang bernama “accordion-show” dalam ID yang ditentukan. Bila tidak ada, maka class “accordion-content” akan digantikan dengan “accordion-show”, apabila class “accordion-show” ditemui, maka yang yang terjadi adalah sebaliknya.

Kondisi ini dijalankan dengan klik pada tombol yang bersangkutan melalui perintah onClick pada button.

Di atas adalah cara bagaimana membuat spoiler dengan menggunakan accordion. Accordion ini juga bisa digunakan sebagai menu, misalnya pada sidebar, dengan mengganti isi dari content dengan menu, baik itu hanya berupa link dengan teks dan <a> tag, maupun dengan menggunakan metode list (baca: Menu Website Dengan Submenu Menggunakan HTML dan CSS).

Penggunaan accordion sangat efektif untuk website atau blog dengan mobile template baik itu menggunakan template responsif atau stripped down (template khusus untuk mobile pada subdomain atau subfolder), supaya pengunjung lebih nyaman membuka dan membaca dengan mudah hal-hal yang penting saja tanpa harus melakukan scrolling terlalu panjang.

Untuk kemudahan pemakaian, kode CSS dan javascript bisa ditaruh dalam file tersendiri dengan ekstensi .php, sehingga bila anda memiliki website atau blog pada domain lain, anda tidak perlu lagi membuat kembali script di atas, cukup meng-copy dan ‘memanggil’ dari file .php yang sudah ada atau langsung dipanggil dari domain lain.


Dipublikasikan oleh theangelwing dalam kategori Blogging, Website pada tanggal Feb 01, 2017
Tags : , , ,


www.000webhost.com