Cara Membuat Menu Accordion Dengan CSS

Hai semuanya di artikel kali ini kita akan belajar bagaimana cara membuat menu accordion dengan CSS. Kenapa tidak menggunakan jQuery saja ? alasannya cukup simple hanya sekedar accordion kita juga bisa membuatnya dengan CSS murni tanpa jQuery atau pun javascript. Jika teman teman belum tahu accordion ? accordion itu ketika kita klik salah satunya tab maka tab yang lain akan hilang yang isinya bisa menu atau kontent yang akan ditampilkan. Cukup itu untuk perkenalannya kita langsung membuatnya untuk pertama kali kita akan buat elemen HTMLnya sebagai berikut

Teman teman bisa buat 2 menu tab lagi tetapi dengan id yang berbeda beda dan nama id nya harus sama pada linknya selanjutnya kita akan berikan sedikit CSS seperti berikut

Sebelum saya membuat accordionnya saya akan menjelaskan property yang baru pada CSS yakni :target jadi property tersebut akan menargetkan id nya pada link atau pas kita klik menunya maka kita akan melakukan sesuatu

Jadi mirip seperti event onclick pada javascript yang dimana ketika kita klik akan menargetkan elemen yang lain. Yang pertama kita hilangkan contentnya dengan memberikan height dan overflow sebagai berikut

Kemudian kita ke trik berikutnya jadi contentnya jadi target ketika di klik maka kita akan berikan tingginya otomatis dan berikan nilai padding seperti berikut

Maka ketika ditampilkan dibrowser kita sudah berhasil membuat contoh sederhana dalam pembuatan accordion sebagai berikut

Dan diklik menu satu maka akan tampil kontentnya dan klik menu dua maka menu satu akan otomatis hilang karena targetnya akan berganti berdasarkan link yang ditargetkan. Oke semoga bermanfaat