Expand dan Collapse merupakan efek untuk menampilkan gambar keseluruhan dan mengembalikannya ke kondisi semula (hide/tidak menampilkan gambar secara penuh). Konsep ini terinspirasi dari Orkut.com, dimana ketika gambar diupdate ditampilkan sebagian (collapse) pada halaman web.
![Membuat Expand dan Collapse Pada Gambar dengan jQuery](https://www.eplusgo.com/wp-content/uploads/2013/04/flower.png)
Untuk membuat fitur expand dan collapse pada gambar kita akan menggunakan bantuan jQuery.
Langkah 1 – HTML
Buatlah kerangka HTML untuk menampilkan gambar beserta link. Misal index.html
<div class="outerGambar"> <div class="gambar"><img src="flower.jpg"/> <div class="showHideLink"> <span class="link">Tampilkan</span></div> </div> </div>
Langkah 2 – jQuery
Kemudian, gunakan perintah jQuery untuk mengontrol gambar yang telah disiapkan. Anda bisa menempatkan perintah ini di file index.html ataupun di file lainnya.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".gambar").css(‘max-height’,’110px’); // Awalnya, gambar hanya ditampilkan sebagian saja. Disini kita menampilkan gambar sebesar 110px $(".gambar").mouseover(function(){ $(".showHideLink").show(); }).mouseout(function(){ $(".showHideLink").hide(); }); $(".link").click(function(){ // Ketika link Tampilkan di klik, maka gambar akan ditampilkan secara penuh if($(this).html()==’Tampilkan’){ $(".gambar").css(‘max-height’,”); $(this).html(‘Sembunyikan’); }else{ $(".gambar").css(‘max-height’,’100px’); $(this).html(‘Tampilkan’); } }); }); </script>
Jalankan file index.html yang telah dibuat untuk melihat hasilnya. Selamat Mencoba.