Membuat Toggle Sederhana: Css dan jQuery

Bertemu dengan saya angga a.k.a anggamovic, yap tak di duga ta dinyana diriku masuk kedalam author di sini ( gayanye….. wkwkkw)
=========== Introduction ============
Oke oke…. disini saya mungkin hanya sedikit menyinggung soal hacking, kenapa? ya karena saya sedikit menguasai soal hacking, nah sebagai gantinya saya akan lebih menitik beratkan kedalam pembahasan web desain / developer.
Menurut Wikipedia CSS dan JQUERY adalah sebagai berikut
CSS
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.Untuk mengawali perjumpaan kita, sebagai salam hangat ceritanya… saya akan memberi sebuah tutor ringan, yaitu membuat toggle sederhana dengan css dan jquery.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).[1] Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
JQUERY
jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL
Yuk, lanjut ke tutorialnya setelah mengetahui informasi mengenai CSS dan JQUERY. Berikut detail tutorialnya,

==> Step 1. Wireframe & Style <==
Kita mulai dengan tag h2 dengan link sebagai “trigger” untuk efek kita.
HTML

<h2><a href="#">Toggle Header</a></h2>
<div>
 <div>
  <h3>Content Header</h3>
  <!--Content-->
 </div>
</div>

CSS

h2.trigger {
 padding: 0 0 0 50px;
 margin: 0 0 5px 0;
 background: url(h2_trigger_a.gif) no-repeat;
 height: 46px;
 line-height: 46px;
 width: 450px;
 font-size: 2em;
 font-weight: normal;
 float: left;
}
h2.trigger a {
 color: #fff;
 text-decoration: none;
 display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;}
/*--When toggle is triggered, it will
shift the image to the bottom to show its "opened" state--*/
.toggle_container {
 margin: 0 0 5px;
 padding: 0;
 border-top: 1px solid #d6d6d6;
 background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
 overflow: hidden;
 font-size: 1.2em;
 width: 500px;
 clear: both;
}
.toggle_container .block {
 padding: 20px;
/*--Padding of Container--*/
 background: url(toggle_block_btm.gif) no-repeat left bottom;
 /*--Bottom rounded corners--*/
}

==> Step 2. Aktifkan Toggle Dengan jQuery <==

$(document).ready(function(){

 //Hide (Collapse) the toggle containers on load
 $(".toggle_container").hide(); 

 //Switch the "Open" and "Close" state per click then slide up/down
 (depending on open/close state)
 $("h2.trigger").click(function(){
  $(this).toggleClass("active").next().slideToggle("slow");
  return false;
//Prevent the browser jump to the link anchor
 });

});

Untuk demo:

http://anggamovic.co.tv/demo/toggle.htm

Oke, di cukupkan pembahasanya untuk sekarang, kita akan menyelam kedalam dunia web desain di pertemuan yang akan datang…
So see ya…
Have a nice day and GBU!

Posted in: Pemograman