Cara Membuat Accordion Menggunakan Mootools

Sebelum Memulai tutorial kali ini tentang Cara Membuat Accordion Menggunakan Mootools, ada baiknya kita mengetahu dulu apa itu Mootools? Mootools adalah kumpulan utilitas JavaScript dirancang untuk pengembang JavaScript tingkat menengah sampai tingkat mahir. Hal ini memungkinkan anda untuk menulis kode yang kuat dan fleksibel namun tetap elegan, didokumentasikan dengan baik, dan API yang koheren.

Kode di dalam Mootools secara luas didokumentasikan dan mudah dibaca, memungkinkan anda untuk memperluas fungsi dengan menyesuaikan kebutuhan Anda. Saya akan mencoba memberi contoh penggunaan mootools dengan juduk Cara Membuat Accordion Menggunakan Mootools. Berikut langkah-langkahnya:

-   Pertama buka text editor anda dan kita buat struktur htmlnya dulu, berikut kode htmlnya:

<!DOCTYPE html>
<html>
<head>
	<title>Accordion Mootools</title>
	<link rel="stylesheet" href="style.css">
	
</head>
<body>
<div id="accordion">
  
  <h2>Web Master</h2>
  
  <div class="content">
    <p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting.</p>
    <p>Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf</p>
  </div>
  
  <h2>Web Programming</h2>
  
  <div class="content">
    <p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting.</p>
    <p>Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf</p>
  </div>
  
  <h2>Web Design</h2>
  
  <div class="content">
    <p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting.</p>
    <p>Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf</p>
  </div>


</div>
</body>
</html>

-   Kedua kita buat file cssnya di sini saya menggunakan css dengan nama style.css dan jangan lupa hubungkan cssnya dengan html, berikut adalah kode css-nya:

#accordion  {
  margin: 20px 0 0;
  max-width: 400px;
}
  #accordion H2 {
    background: #3578E6;
    color: white;
    cursor: pointer;
    font: 12px Helvetica, Arial, sans-serif;
    line-height: 16px;
    margin: 0 0 4px 0;
    padding: 3px 5px 1px;
  }
  #accordion .content {
    background-color: #D1FFFF;
  }
  #accordion .content p {
    margin: 0.5em 0;
    padding: 0 6px 8px 6px;
  }

Setelah itu teman-teman jalankan htmlnya menggunakan browser teman-teman, maka tampilannya akan menjadi seperti gambar di bawah ini:

-   Ketiga teman-teman download file mootoolsnya di website mootools, lalu simpan di dalam folder yang sama dengan file html dan cssnya.-   Keempat, kita panggil file mootoolsnya dengan menggunkaan kode di bawah ini:

<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

-   Terakhir Masukan kode javascript sebelum penutup tag </body>  :

<script type="text/javascript">
  window.addEvent('domready', function(){
  new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .content');
});
  </script>

Coba teman-teman refresh browsernya, maka tampilannya akan menjadi seprti gambar di bawah ini:

Ketika teman-teman klik judulnya maka efek accordion akan berfungsi.

Bagaimana teman-teman cukup mudahkan membuat accordion menggunakan mootools. Sekian tutorial kali ini tentang Cara Membuat Accordion Menggunakan Mootools. Jangan lupa di praktekan ya teman-teman.