Ticker

6/recent/ticker-posts

Mengelompokkan Content Atau Menu Yang Sejenis Dengan JQuery Accordion

Desember 22, 2016
Accordion pada JQuery berfungsi untuk mengelompokkan content dalam panel-panel yang terpisah, dimana pengunjung dapat membuka dan menutup panel-panel yang diinginkan. Disamping itu, accordion juga bisa untuk mengelompokkan menu-menu yang sejenis.
Berikut contoh penggunaan Accordion


<html>
<head>
<title>Menggunakan Accordion</title>
<link type=text/css" href="jquery.ui.all.css" rel ="stylesheet" />
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.accordion.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("#isi").accordion();
});
</script>
<body>
<div id="isi">
   <h2><a href="#">Kelompok Pertama</a></h2>
   <div>Isi content dari kelompok pertama</div>

       <h2><a href="#">Kelompok Kedua</a></h2>
   <div>Isi content dari kelompok kedua</div>

   <h2><a href="#">Kelompok Ketiga</a></h2>
   <div>Isi content dari kelompok Ketiga</div>
</div>
</body>
</html>

Lebih jelasnya bisa lihat contoh pada link Berikut



Pada contoh diatas untuk membuka isinya kita harus mengklik header, bagaimana jika kita ingin membuka isinya cukup dengan mengarahkan cursor mouse ke bagian header?
Caranya mudah saja cukup menambahkan beberapa sintak di dalam script jquery nya seperti berikut :

$("document").ready(function(){
  $("#isi").accordion({
    event:"mouseover"
  });
});
Unknown

Diposting oleh Unknown

Posting Komentar

0 Komentar