Cara Mudah Membuat Accordion Menu

Posted by Tips Trick Blogger Tuesday, January 25, 2011 0 comments

Kemarin setelah browsing ke tempat om jquery, ada suatu hal menarik yang ane dapat di sana. Pembuatan widget yang menggunakan jquery merupakan suatu yang menarik, dan sebenarnya om jquery sudah memberikan script dasar untuk pembuatan tersebut, serta beberapa trik pengembangan. Namun kali ini ane hanya akan share script sederhana untuk membuat accordion menu, pembuatannya tergolong mudah alias gak ribet, biar kita sama-sama ngerti bila kita ingin mempelajari tentang jquery lebih dalam lagi. Sebelum kita mulai silahkan lihat demonya disebelah kanan (right sidebar) paling atas. Klik gambar di bawah untuk melihat demonya.

Ok....sekarang mari kita lakukan langkah pembuatannya.
Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode di bawah setelah <head>

<link href="http://ajax.googleapis.com/

ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"

rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/

ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/

ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });
  </script>

Simpan Template
Klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan Kode berikut ke dalamnya

<div id="accordion">
<h3><a href="#">Accordion 1</a></h3>
<div>
<p>
masukkan tulisan anda di sini. Kalau mau mengganti jadi list

hapus kode <p>....</p> dan ganti menjadi seperti accordion 2
</p>
</div>
<h3><a href="#">accordion 2</a></h3>
<div>
<ul>

<li>List item one</li>

<li>List item two</li>
<li>List item three</li>

</ul>

</div>
<h3><a href="#">accordion 3</a></h3>
<div>
<p>

Masukkan tulisan anda di sini. Ini hanya Contoh gabungan

antara paragraf dan list
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
Masukkan Tulisan anda di sini
</p>
<p>
Di sini juga bisa nada masukkan tulisan