Artikel ini adalah lanjutan dari beberapa tutorial efek visual yang saya post sebelumnya untuk para web designer. Sebelumnya kita sudah belajar membuat panel geser, cara menghilangkan suatu elemen seperti div dan juga efek transisi perpindahan suatu elemen pada HTML. Sekarang mari kita belajar cara membuat jQuery accordion dan perpindahan gambar pada galeri.

Membuat jQuery Accordion

Secara tidak langsung anda mungkin sudah sering melihat jQuery accordion diterapkan di banyak website, umumnya jQuery accordion ini banyak digunakan untuk mempersingkat tampilan berita/produk dimana kita hanya melihat baris-baris judul berita atau nama produknya saja, tapi ketika judul/nama produk tersebut kita sorot nanti ada sebuah elemen yang geser kebawah berisi ringkasan berita. jQuery accordion ini sangat berguna untuk menghemat space halaman website apalagi kalau website kita memiliki content yang sangat banyak. Saya sendiri pernah menggunakan jQuery accordion ini pada beberapa project yang saya kerjakan, berikut ini adalah contoh sebuah jQuery accordion yang saya buat :

Berikut ini saya perlihatkan script yang di perlukan untuk membuat jQuery accordion:

    $(".news_accordion h3:last").addClass("active");
    $(".news_accordion h3:first").addClass("noborder");
    $(".news_accordion div:not(:last)").hide();
    $(".news_accordion h3").hover(function(){ 
        $(".news_accordion h3").removeClass("active");
        $(this).toggleClass("active");
        $(this).next("div").slideToggle(0).siblings("div:visible").slideUp(250); 
    });

Integrasi coding diatas dengan css dan html

<script type="text/javascript">
$(document).ready(function(){
    $(".news_accordion h3:last").addClass("active");
    $(".news_accordion h3:first").addClass("noborder");
    $(".news_accordion div:not(:last)").hide();
    $(".news_accordion h3").hover(function(){ 
        $(".news_accordion h3").removeClass("active");
        $(this).toggleClass("active");
        $(this).next("div").slideToggle(0).siblings("div:visible").slideUp(250); 
    });
});
</script>
<style type="text/css">
.news_accordion h3 {
    background: #fff url(arrow.gif) no-repeat right -51px;
    height: auto;
    line-height:30px;
    padding-left:5px;
    font-size:14px;
    font-weight:normal;
    border-top: thin solid #cccccc;
    margin:0;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    cursor: pointer;
    width:375px;
}
.news_accordion h3.noborder { border-top:none; }
.news_accordion h3.active { background-position: right 5px; background-color:#eee;}
.news_accordion div { height:75px; text-align:left; padding:5px 0 0 5px; width:375px; line-height:20px; font-size:12px; color:#555555; }
.news_accordion div a{ color:#000; text-decoration:none; }
.news_accordion div a:hover{ color:#F30;  }
.news_accordion img { width:65px; height:65px; overflow:hidden; line-height:80px; }
</style>
<div class="news_accordion">
    <h3><a href='#'>Title Berita / Nama Produk 1</a></h3>
    <div>Ringkasan berita<a href="#">more</a></div>
    
    <h3><a href='#'>Title Berita / Nama Produk 2</a></h3>
    <div>Ringkasan berita<a href="#">more</a></div>
    
    <!-- dan seterusnya -->
</div> 

Penjelasan kode jQuery yang saya buat diatas adalah sebagai berikut:

• baris pertama yaitu $(".news_accordion h3:last").addClass("active"); digunakan untuk menambahkan class CSS active pada h3 yang merubah posisi background tanda panah
• baris ke dua $(".news_accordion h3:first").addClass("noborder"); digunakan untuk menghilangkan border atas (class="noborder")
• baris ke ke tiga $(".news_accordion div:not(:last)").hide(); digunakan untuk menyembunyikan div child dari class news_accordion kecuali child yang terakhir div:not(:last)
• baris selanjutnya diggunakan untuk menghilangkan semua class active dari elemen h3, menambahkan class active pada h3 yang disorot sekaligus menampilkan div dibawahnya dan pada saat yang sama menyembunyikan div dibawah h3 lainya yang masih tampil dengan efek slideUp (geser ke atas)

Membuat Pergantian Gambar pada Galeri

Pada website tradisional apabila kita ingin melakukan pergantian gambar maka kita harus lompat ke halaman lain. Nah jiga anda mungkin punya portofolio yang banyak dalam bentuk gambar dan ingin anda perlihatkan tanpa harus berpindah-pindah halaman, anda bisa membuatnya dengan jQuery seperti dibawah:

Galeri Portofolioku

Berikut ini adalah script yang di perlukan untuk membuat pergantian gambar diatas dengan jQuery:

	//apabila ingin pada saat di click ganti menjadi $(".imgthumbs a").click(function(){ 
	$(".imgthumbs a").hover(function(){ 
		var largeImage = $(this).attr("href");
		var imgTitle = $(this).attr("title");
		$("#largeImages").attr({ src: largeImage, alt: imgTitle });
		$(".imgTitle").html(imgTitle); 
		return false;
	});

Integrasi coding diatas dengan css dan html adalah sebagai berikut:

<script type="text/javascript">
$(document).ready(function(){
    $(".imgthumbs a").hover(function(){
        var largeImage = $(this).attr("href");
        var imgTitle = $(this).attr("title");
        $("#largeImages").attr({ src: largeImage, alt: imgTitle });
        $(".imgTitle").html(imgTitle); 
        return false;
    });
});
</script>
<style type="text/css">
h2.imgTitle {
    font: bold 190%/100% Arial, Helvetica, sans-serif;
    margin: 0 0 .2em;
}
#largeImages {
    border: solid 1px #ccc;
    width: 460px;
    height: 300px;
    padding: 5px;
}
.imgthumbs img {
    border: solid 1px #ccc;
    width: 100px;
    height: 100px;
    padding: 4px;
    margin-right:8px;
}
.imgthumbs img:hover { border-color: #FF9900; }
</style>
<h2 class="imgTitle">Galeri Portofolioku</h2>
<p><img id="largeImages" src="../images_tutor/tjqai_1.jpg" alt="Large image" /></p>
<p class="imgthumbs">
    <a href="images/wall1.jpg" title="Wallpaper Hitam"><img src="images/thumb_wall1.jpg" /></a>
    <a href="images/wall2.jpg" title="Wallpaper Orange"><img src="images/thumb_wall2.jpg" /></a>
    <a href="images/wall3.jpg" title="Wallpaper Hijau"><img src="images/thumb_wall3.jpg" /></a>
    <a href="images/wall4.jpg" title="Wallpaper Biru"><img src="images/thumb_wall4.jpg" /></a>
</p>

Penjelasan kode jQuery untuk pergantian gambar yang saya buat diatas adalah sebagai berikut:

• $(".imgthumbs a").hover(function(){ ini adalah deklarasi untuk gambar dengan class imgthumbs pada saat disorot pointer mouse, anda bisa mengganti hover dengan click bila ingin pada saat di klik
• var largeImage = $(this).attr("href"); adalah pendefinisian variable largeImage dengan nilai yang di ambil dari atribut href imgthumbs
• var imgTitle = $(this).attr("title"); adalah pendefinisian variable imgTitle dengan nilai yang di ambil dari atribut title imgthumbs
• $("#largeImages").attr({ src: largeImage, alt: imgTitle }); digunakan untuk menganti arah penunjukan gambar pada id largeImages dengan variable yang telah ditentukan sebelumnya (largeImage)
• $(".imgTitle").html(imgTitle);digunakan untuk mengganti text yang terdapat pada class imgTitle dengan variable yang telah ditentukan sebelumnya (imgTitle)

Selamat mencoba