Jquery tutorial – accordion

Membuat accordion dengan jquery

accordion - jquery

Accordion itu seperti menu yang bisa kita klik untuk dropdown menu. Namun hanya bisa 1 dropdown, tidak bisa semuanya. Jika semuanya itu berarti expand.

Nah, Kita coba mulai scriptnya.

Siapkan jquery-1.3.2.min.js dan jquery-ui-1.7.2.custom.min.js juga jquery-ui-1.7.2.custom.css (utk stylesheetnya, berikut imagenya jgn lupa)

Dapet darimana? Masuk aja ke web nya jquery. Cari pilihan download.

Terus kita masukin script ini.

$(function(){
    // Accordion
    $("#accordion").accordion({ header: "h3" });
});

Dan bikin html seperti ini.

<div>
	<h2 class="demoHeaders">Accordion</h2>
	<div id="accordion">
		<?php for ($x=1;$x<=5;$x++)
		{
		?>
		<div>
			<h3><a href="#"><?php echo "$x. Header berita"  ?></a></h3>
			<div><strong>Isi berita</strong> <br />Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
		</div>

		<?php
		}
		?>
	</div>
</div>

Script diatas, itu merupakan script fungsi dari framework jquery.  Yang diberi garis bawah, yaitu hal yang penting dalam accordion ini.

$(“#accordion”)

Fungsi ini untuk mengambil id dari div. Dan Kita harus mempunyai sebuah div yang memiliki id sama dengan fungsi tersebut.

accordion({ header: “h3” });

yang ini untuk mengambil header dari accordion kita.

Simple bukan?

Ini hanya sample, selanjutkan bisa kita gunakan dengan PHP, di script tersebut saya gunakan pengulangan for untuk nomor header nya. Bisa juga digabung dengan database, ataupun xml.

File yang diberikan dalam tutorial ini berbentuk .rar dan harus memakai webserver untuk menjalankannya.

Advertisements

3 thoughts on “Jquery tutorial – accordion

  1. gan makasih tutornyaa, ada salah satu penempatan tutup nya itu yang salah
    🙂

  2. Tag div nya maksudnya 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s