accordion

accordion

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

Kita akan bahas tentang bagaimana membuat menu Accordion dengan j-query . ok langsung aza sebelunya accordiaon yang akan kita bahas sangat mudah dan sangan simple karena kita tidak perlu membua file css ataupun file js nya, karena yang kita akan gunakan adalah file-file yang kita load langsung dari situs j-query nya, so langsung az kita peraktek.
Kita cuma menggunakan 4 langkah saja untuk membuat accordion.

  • Lanngkah 1.

Buat script html untuk membuat tampilan accordionnya lihat script berikut:

  • HTML
<html>
<head>
	<title>accordion</title>
	<meta charset="utf-8">
	  <title>accordion demo</title>
</head>
<body>
<div id="accordion">
	  <h3>Bagian 1</h3>
	  <div>
	    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	    </p>
	  </div>
	  <h3>Bagian 2</h3>
	  <div>
	    <p>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	    proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
	  </div>
	  <h3>Bagian 3</h3>
	  <div>
	    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
	    Quisque lobortis.Phasellus pellentesque purus in massa.</p>

	  </div>
</div>
</body>
</html>
  • penjelasan

Dari script diatas kita save dengan nama accordion.html.  perhatikan disana kita menggunakan div selector  “ID”

  • langkah 2

Untuk langkah ke 2 kita tambahkan baris script untuk memanggil file css disini kita tidak usah membuat style sendiri karena kita menggunakan style yang telah dibuat  dari  j-querynya.  Tambahkan baris script berikut didalam tag <head>.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

Jika anda tidak menyukai style tersebut anda bias membuat sendiri style yang menurut anda bagus.

  • Langkah ke 3

Langkah selanjutnya kita akan meload file j-querynya dan j-query ui nya , tambahkan script berikut dibawah baris yang pada langkah 2.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  • Penjelasan:

Script yang pertama kita meload file j-querynya. Begitu pun sript selanjutnya kita meload file j-query-ui. Script j-query tidak usah kita download Karena kita tinggal load dari situs aslinya, tujuannya ialah ketika kita meload website kita maka yang dibaca adalah script yang langsung ke situs j-querynya.

  • Langkah ke 4

Selanjutnya tambahkan script berikut  sebelum penutup tag body.

<script>
	$( "#accordion" ).accordion();
</script>
  • Penjelassan:

Script berikut adalah javascript, disana ada baris “#accordion” karena pada file html nya kita menggunakan selector id=”accordion” maka pada javascriptnya kita pake tag yang dipake pada selector html yaitu id=”accordion” penulisan id dituliskan “#” itu mungkin pembaca udah pada tahu penjelasan tentang itu jika masih bingung silahkan buka
disini

Setelah itu save file anda dan buka pada browser. Pada accordion yang kita buat sekarang script akan jalan kalo terkoneksi internet karena di a meload dari file2 nya dari situs j-query nya langsung.
Selamat mencoba.

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn
About Ihsan atkia

Ihsan Atkia adalah seorang Front-end Developer yang merambah sebagai UI/UX Web Designer, kecintaannya terhadap dunia Desain muncul semasa sekolah menengah atas (SMA), dengan bergabung di komunitas desain, kemudian melanjutkan di salah satu perguruan tinggi negeri di kota Bandung mengambil jurusan Teknik Informatika, aktif di salah satu club yang bernama Ruang Grafis dan menjadi pengurus club tersebut. dan sampai sekarang masih berkecimpung didunia Web Design khususnya bidang Front-end Developer dan UI/UX Web Designer.