Membuat efek Accordion Collapse dengan CSS dan Javascript

Membahas tentang desain web memang tidak ada habisnya, banyak desain desain modern yang bermunculan membuat kita lebih termotivasi untuk mempelajari dan membuat juga hal baru tersebut. Klai ini saya akan menshare bagaimana cara Membuat efek Accordion Collapse dengan CSS dan Javascript, baiklah langsung saja teman teman kita praktekan yah..

Buka text editor masing masign dan ketikan kode HTML di bawah ini dan beri nama file dengan nama index.html dan simpan file tersebut.

<!DOCTYPE html>
<html>
<head>
    <title>Accordion Effect Cool</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="container">
  <h2 style="text-align: center;">Efek Accordion CSS dan Javascript</h2>
  <p style="text-align: center;">Klik setiap Judul, maka efek akan berjalan</p>

  <button class="accordion">Judul 1</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <button class="accordion">Judul 2</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <button class="accordion">Judul 3</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div> <!-- container -->
</body>
</html>

setelah tag div penutup class container ketika kode java script di bawah ini yah teman teman.

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle(“active”);
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + “px”;
}
}
}
</script>

setelah itu kalian buat file css nya dan beri nama dengan nama style.css lalu simpan sejajar dengan file HTML yang kita buat tadi..

.container{
  width: 900px;
  margin: auto;
  font-family: arial;
}
button.accordion {
    background-color: #e9d460;
    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: #6C7A89;
    color: #fff;
}

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

setelah selesei hasilnya seperti gambar di bawa ini.

baiklah sekian tutorial Membuat efek Accordion Collapse dengan CSS dan Javascript ini, semoga bermanfaat.. keep coding 😀

Membuat efek Accordion Collapse dengan CSS dan Javascript

Kategori