Membuat Toggle Sederhana: Css dan jQuery

=========== 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

&lt;h2&gt;&lt;a href="#"&gt;Toggle Header&lt;/a&gt;&lt;/h2&gt; &lt;div&gt;     &lt;div&gt;         &lt;h3&gt;Content Header&lt;/h3&gt;         &lt;!--Content--&gt;     &lt;/div&gt; &lt;/div&gt;

1 2 3 4 5 6 7

<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--*/ }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

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     }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(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     }); });

Oke, di cukupkan pembahasanya untuk sekarang, kita akan menyelam kedalam dunia web desain di pertemuan yang akan datang…