ZMedia Purwodadi
Beranda JavaScript

Mudah! Menyembunyikan Div dan Text dengan jquery

Gambar
bos music01
Diperbarui: • • menit membaca
Daftar Isi

jQuery merupakan pelengkap dalam membuat website, karena jquery mempunyai banyak method effect. Banyak yang dapat sobat lakukan dengan jquery dari membuat animasi serta pengolahan data. 

Perintah untuk menampilkan dan menyembunyikan elemen cukup banyak seperti yang banyak orang ketahui- show () perintah untuk menampilkan elemen HTML dan hide () digunakan untuk melakukan perintah menyembunyikan elemen HTML.

Pada tutorial kali ini codepelajar akan memberikan sebuah tutorial cara Menyembunyikan Div dan Text dengan jquery dengan mudah, silahkan simak artikel berikut dan peraktekkan saat sudah paham.

Contoh Script Show()

[selector].show( speed, [callback] );

Berikut ini adalah deskripsi dari semua parameter –

speed – String yang mewakili salah satu dari tiga kecepatan yang ditentukan sebelumnya (“slow”, “normal”, atau “fast”) atau jumlah milliseconds untuk menjalankan animasi (e.g. 1000).

callback – Parameter opsional ini mewakili fungsi yang akan dieksekusi setiap kali animasi selesai; dijalankan sekali untuk setiap elemen yang dianimasikan.

Sintaks sederhana untuk metode hide () –

[selector].hide( speed, [callback] );

Dibawah ini adalah deskripsi dari semua parameter –

speed – String yang mewakili salah satu dari tiga kecepatan yang ditentukan sebelumnya (“slow”, “normal”, atau “fast”) atau jumlah milliseconds untuk menjalankan animasi (e.g. 1000).

callback – Parameter opsional ini mewakili fungsi yang akan dieksekusi setiap kali animasi selesai; dijalankan sekali untuk setiap elemen yang dianimasikan.

Contoh

Contoh dari Cara Menyembunyikan Div dan Text dengan jquery, silahkan sobat simak

<html>
   <head>
      <title>Cara Menyembunyikan Div dan Text dengan jquery</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#show").click(function () {
               $(".mydiv").show( 1000 );
            });

            $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #f6230b; 
            width:100px; 
            height:100px;
            color: #0bb4f6;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

Penutup

Oke mungkin itu saja yang dapat codepelajar sampaikan semoga dengan metode ini sovat dapat membuat website atau aplikasi lebih bagus lagi, terimakasih.