Baca Juga :  Script Login PHP dengan Session

Membuat jQuery Show and Hide

0 370

jQuery adalah salah satu kerangka kerja yang paling populer digunakan karena kesederhanaannya mengenai praktik pengkodean, pembelajaran dan lain-lain. Mari kita memiliki sebuah contoh untuk menciptakan efek hide show dengan menggunakan jQuery. Kita bisa melakukan hal yang sama dengan menggunakan Javascript sederhana juga. Tapi, alasan mengapa kita akan menggunakan jQuery adalah sebagai berikut.

  • Sederhanakan kode dengan menggunakan fungsi inbuilt dan dengan demikian mengurangi beban dari melakukan semua hal dengan cara kita sendiri. Misalnya, untuk menyembunyikan elemen dari browser menggunakan Javascript, kita harus mengidentifikasi nama atau id mereka seperti,
    document.some-form-name.element-name.display = 'none';
    //atau
    document.getElementById(element-id).display = 'none';
    
  • jQuery memberikan respon lebih cepat saat bekerja dengan pemrograman kompleks seperti AJAX.
  • Kerangka ini memberikan efek yang dijamin sama di semua browser yang merupakan masalah utama dalam Javascript.
  • Dengan memiliki perpustakaan Javascript, ini mencakup kumpulan fungsi seperti penanganan event, AJAX, efek dinamis pada elemen HTML dan sebagainya, yang dibutuhkan saat mengembangkan aplikasi web.
Baca Juga :  Membuat Pagination AJAX dengan PHP

Contoh: jQuery Tampilkan Sembunyikan

Dalam contoh ini, kita memiliki dua link yang bernama expand dan collapse untuk menampilkan dan menyembunyikan daftar program satu per satu. Link yang muncul seperti tombol dengan menerapkan pemilih kelas CSS. Jadi, link bisa dibuat seperti,

<a href="#" class="expand">Expand All</a>
<a href="#" class="collapse">Collapse All</a>

Saat mengklik tautan ini, acara dipicu dengan menggunakan fungsi klik jQuery sehubungan dengan nama pemilih kelas tertentu. Misalnya, jika kita mengklik link collapse, blok kode jQuery berikut akan dieksekusi.

$('.collapse').click(function(){
$(".collapse").hide();
$("li").last().hide("slow", function fnCollapse() {
$(this).prev("li").hide("slow", fnCollapse);
if(!$(this).prev("li").length)
	$(".expand").show();
});
});

Di blok di atas, saat mengklik link runtuh, itu akan disembunyikan menggunakan metode jQuery’s hide (). Dan kemudian, kita memanggil metode fnCollapse () secara rekursif untuk menyembunyikan setiap item dari bawah ke atas daftar. Sekali, tidak ada item yang ditemukan runtuh, maka link expand akan ditunjukkan dengan menggunakan metode show ().

Demikian pula, kita dapat mengulangi hal yang sama untuk memperluas, untuk menampilkan setiap item yang diciutkan dari atas ke bawah daftar. Dan kodenya seperti yang ditunjukkan di bawah ini.

$(".expand").hide();
$('.expand').click(function(){
$(".expand").hide();
$("li").first().show('slow',function fnExpand() {
$(this).next("li").show("slow", fnExpand);
if(!$(this).next("li").length)
$(".collapse").show();
});
});

Kita harus menempatkan dua event handlers di atas dalam blok yang ditunjukkan di bawah ini. Blok ini akan tampil seperti window.onload () fungsi plain Javascript.

$(document).ready(function(){
... 
});

Kita dapat mengelompokkan potongan kode jQuery di atas ke dalam satu file Javascript dan menyimpannya sebagai jquery.showhide.js untuk memasukkannya ke dalam halaman HTML. Sebelum itu, kita perlu mendownload file jQuery library versi terbaru dari situs resmi jQuery. Atau kita bisa menggunakannya dari internet dengan menentukan URL itu di atribut src dari tag.

<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.showhide.js"></script>
</head>
<body>
<table width="500px" cellpadding="10" cellspacing="10" border="0" class="tblShowHide">
<tr>
<td valign="top">
<div>
<span>Category Media</span>
<a href="#" class="expand">Expand All</a>
<a href="#" class="collapse">Collapse All</a>
</div> 
<ul>
<li>News</li>
<li>Knowledge</li>
<li>Religion</li>
<li>Entertainment</li>
<li>Movies</li>
<li>Music</li>
<li>Comedy</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Demo

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.