Thursday, May 21, 2015

Contoh Penerapan Jquery UI Accordion

contoh jquery ui accordion

Contoh Penerapan Jquery UI Accordion - Salah satu kemampuan JQuery UI yang cukup mengesankan adalah mudahnya kita membangun objek hanya dengan menerapkan fungsi pada elemen yang kita inginkan. Sehingga akan mempermudah kita untuk modifikasi design blogger sesuai keinginan kita. Berikut ini adalah contoh penerapan Jquery Ui Accordion secara sederhana, seperti halnya artikel sebelumnya tentang :

Contoh Efek Jquery UI
Random Post Efek Modal Jquery UI
Simple Tab Menggunakan Jquery UI

DEMO

Untuk bisa menampilkan efek Plugin Jquery UI ini :
1. Install Jquery UI sebelum kode </head>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
2. Kemudian membuat design kerangka untuk accordionnya

.content {
  margin:105px auto;
  width:700px;
}

#accordion h4{
  margin:5px 0 0;
  padding:15px;
  font-family: "Helvetica Neue", Helvetica,  sans-serif;
  font-size:20px;
  font-weight:normal;
  text-align:center;
  color:#fff;
  background:#36424a;
  outline: 0;
  cursor:pointer;
}

#accordion h4:hover {
  background:#555;
}

#accordion div {
  position:relative;
  margin:0 0 0;
  padding:15px;
  color:#fff;
  background:#e06666;
}

#accordion div:after {
position: absolute;
top: -27px;
left: 45px;
display: block;
width: 0;
height: 0;
margin-left: -20px;
border-width: 15px;
border-style: solid;
border-color: transparent transparent  #e06666  transparent;
content: '';
}
3. Lalu untuk memanggil css element diatas kita buat markup html seperti ini :

<div class="content">
  <h1> Contoh Penerapan JQuery UI Accordion</h1>
<div id="accordion">
  <h4>Setunggal</h4>
  <div><p>BLA BLA BLA</p>
  </div>
  <h4>Kalih</h4>
  <div><p>BLA BLA BLA</p>
  </div>
  <h4>Tigo</h4>
  <div><p>BLA BLA BLA</p>
  </div>
  <h4>Sekawan</h4>
  <div><p>BLA BLA BLA</p>
  </div>
</div>
</div>
Sampai disini bentuk kerangka accordion sudah berhasil kita buat, akan tetapi masih belum bisa berjalan. Dan langkah terakhir adalah dengan menambahkan fungsi accordion seperti ini:

$(function() {
  $("#accordion").accordion({
    collapsible: true,
    heightStyle: "content"
  });
});
Anda hanya tinggal mengubah content " BLA BLA BLA " diatas sesuai text yang ingin di tampilkan dan untuk tag heading h4 bisa kita ubah sesuai kebutuhan