Hallo, Code user kali ini akan memberikan sebuah tutorial yaitu tutorial menggunakan model Accordion dengan jQuery UI. Untuk langkah langkah pembuatannya tidak begitu menyulitkan. langsung saja kita buat.
sebelum memulainya kalian harus mempunyai library jQuery terlebih dahulu. kamu bisa download di website resminya yaitu di : jQueryui.com/download/ sesuai kebutuhan ya downloadnya.
jika sudah di download jangan lupa dipanggil file jQuery ui tersebut dengan tag sebagai berikut:
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
setelah itu kita buat tag htmlnya dengan kode sebagai berikut :
jika sudah membuat tag htmlnya berikutnya ialah membuat fungsi jQuery untuk menjalankan ID Accordion (#accordion) dengan model Accordion berikut ialah codenya :
jika sudah coba lah kalian buka browser dan klik pada bagian headingnya maka nanti akan otomatis keluar tag isi dari masing masing heading tersebut.
Berikut adalah contoh kode keseluruhannya :
Itulah tutorial sederhana membuat Accordion dengan jQuery UI. semoga artikel ini bermanfaat buat sobat. dan tutorial ini sangat dibuat sederhana tanpa adanya CSS. dan jika sobat ingin menggunakan jQuery CSS maka sobat bisa download di link berikut :
Original Artikel and Original Video. @ Emperium Tech And Code User 2017.
Subscribe Chenel Emperium Tech.
<div id="accordion">
<h2>Accordion 1</h2>
<p>isi accordion pertama</p>
<h2>accordion 2</h2>
<p>isi dari accordion 2</p>
</div>
jika sudah membuat tag htmlnya berikutnya ialah membuat fungsi jQuery untuk menjalankan ID Accordion (#accordion) dengan model Accordion berikut ialah codenya :
<script type="text/javascript">
$(function(){
$("#accordion").accordion();
});
</script>
jika sudah coba lah kalian buka browser dan klik pada bagian headingnya maka nanti akan otomatis keluar tag isi dari masing masing heading tersebut.
Berikut adalah contoh kode keseluruhannya :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI | Accordion</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
</head>
<body>
<div id="accordion">
<h2>Accordion 1</h2>
<p>isi accordion pertama</p>
<h2>accordion 2</h2>
<p>isi dari accordion 2</p>
</div>
<script type="text/javascript">
$(function(){
$("#accordion").accordion();
});
</script>
</body>
</html>
Itulah tutorial sederhana membuat Accordion dengan jQuery UI. semoga artikel ini bermanfaat buat sobat. dan tutorial ini sangat dibuat sederhana tanpa adanya CSS. dan jika sobat ingin menggunakan jQuery CSS maka sobat bisa download di link berikut :
Dan terakhir jika masih ada yang kurang bisa lihat video berikut atau Command di artikel ini. Terima Kasih Atas kunjungannya Sobat.
Original Artikel and Original Video. @ Emperium Tech And Code User 2017.
Subscribe Chenel Emperium Tech.