Cara Membuat Menu Accordion HTML CSS DAN JS

Menu Accordion merupakan efek untuk memunculkan suatu konten didalam elemen dengan cara mengklik pada elemen tersebut.


Sebagai contoh sobat bisa lihat DEMO Menu Accordion yang sudah saya buat dengan menggunakan HTML, CSS dan JS.

Cara membuatnya, sobat siapkan text editor seoerti notepad++ atau Sublime Text. Silahkan sobat download dan instal salah satu text editor diatas jika memang di perangkat sobat belum ada.

Selanjutnya sobat buka text editornya, untuk langkah awal pembuatan menu accordion ini bisa sobat lakukan dengan cara membuat struktur awal HTML seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Accordion Example</h2>

<p>In this example we have added a "plus"
sign to each button. When the user clicks
on the button,the "plus" sign is replaced
with a "minus" sign.</p>


<button class="accordion">Tiger</button>
<div class="panel">
  <p>The tiger is the largest cat species,
most recognisable for their pattern of
dark vertical stripes on reddish-orange
fur with a lighter underside.</p>
</div>

<button class="accordion">Lion</button>
<div class="panel">
  <p>The lion is one of the big cats in
the genus Panthera and a member of the family
Felidae.The commonly used term African lion
collectively denotes the several subspecies
in Africa.</p>
</div>

<button class="accordion">Cheetah</button>
<div class="panel">
  <p>The cheetah, also known as the
hunting leopard, is a big cat that occurs
mainly in eastern and southern Africa and
a few parts of Iran</p>
</div>
</body>
</html>

Pada tag <h2> dan <p> bisa sobat ganti menggunakan bahasa sendiri. Baiklah, langkah selanjutnya, sobat bisa masukan kodr css dibawah ini tepat diatas kode </head>

<style>

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}


button.accordion.active, button.accordion:
hover {
    background-color: #ddd;
}


button.accordion:after {

/* Unicode character for "plus" sign (+)
is '\02795' */ 

    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}


button.accordion.active:after {

/* Unicode character for "minus" sign (-)
is '\2796' */ 

    content: "\2796";
}


div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}

</style>

Kemudian setelah sobat memasukan kode diatas, langkah selanjutnya, sobat masukan kode JS dibawah ini, tepat diatas kode </body> .

<script>

var acc = document.getElementsByClassName
("accordion");
var i;

for (i = 0; i < acc.length; i++) {
 acc[i].onclick = function(){
  this.classList.toggle("active");
  this.nextElementSibling.classList.
  toggle("show");
  }
}

</script>

Setelah itu, sobat save as - beri nama apa saja dengan akhiran html contohnya Accordion.html . Kemudian sobat buka menggunakan browser dengan cara klik kanan pada file yg sudah sobat simpan tadi, lalu pilih open menggunakan mozila atau chrome.

Selesai.

Semoga bisa bermanfaat ya.

Terima kasih

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Menu Accordion HTML CSS DAN JS"

Post a Comment

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel