Hide / Unhide Content using Javascript

Post at Thu, 03.January.2008 10:11:56 PM .
Hit: 1918 . Comment: 0
 
Kadangkala saat membuat website kita dihadapkan dengan masalah tempat yang terbatas, sedangkan banyak content atau module yang ingin kita taruh di website kita. Nah, sekarang gimana caranya agar semua content tetap bisa tampil tanpa membuat halaman website terlihat terlalu ramai.  Salah satu cara adalah menyembunyikan separuh content yang akan kita tampilkan, kemudian sediakan link/ button supaya user dapat melihat isi dari content yg terlihat separuh tersebut.

Disini, saya akan menggunakan Javascript untuk menyembunyikan dan menampilkan content.

Pertama, Buat file HTML terlebih dahulu .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		  <html>
    <head><title>Testing</title>
    </head>
    <body>
       <div id="contents">
           Name    : Hello World<br />
           Ability : C++, PHP, MySql, .NET, JAVA, etc<br />
           Level   : 56<br />
           <a href="javascript:;"><b>More About Me</b></a>
           <div id="contents_hide">
                 Magic  : Fire, Water, Firaga<br />
                 Summon : Bahamut, Shiva<br />
                 Hobby  : riding Chocobo, swimming over the sea <br />
           </div>
       </div>
    </body>  
</html>


Pada baris 10 sampai baris 14 adalah content yang akan di-hide / disembunyikan. Content yang disembunyikan itu kita apit dengan "<div>" yang id-nya dikasi nama "content_hide".
Setelah membuat html diatas, sekarang kita tambahkan sedikit javascript dan css (di dalam javascript).

1
2
3
4
5
6
7
8
9 		 <script type="text/javascript">
    function showHideContent(id){
        if(document.getElementById(id).style.display==""){
            document.getElementById(id).style.display="none";
        }else{
            document.getElementById(id).style.display="";
        }
    }    
</script>


Pada baris 3, kita cek terlebih dahulu apakah content dalam keadaan terbuka atau tertutup, jika dalam keadaan terbuka maka sembunyikan content dengan menset css display jadi "none", sebaliknya jika content dalam keadaan tersembunyi maka tampikan content dengan menset css display jadi string kosong "".
Sekarang kita gabungkan javascript di atas ke dalam HTML yang sudah kita buat menjadi sebagai berikut :

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		  <html>
    <head><title>Testing</title>
    <script type="text/javascript">
        function showHideContent(id){
             if(document.getElementById(id).style.display==""){
                 document.getElementById(id).style.display="none";
             }else{
                 document.getElementById(id).style.display="";
             }
       }   
    </script>
    </head>
    <body>
       <div id="contents">
           Name    : Hello World<br />
           Ability : C++, PHP, MySql, .NET, JAVA, etc<br />
           Level   : 56<br />
           <a href="javascript:;" onclick="showHideContent('contents_hide')">
                      <b>More About me</b>
           </a>
           <div id="contents_hide">
                 Magic  : Fire, Water, Firaga<br />
                 Summon : Bahamut, Shiva<br />
                 Hobby  : riding Chocobo, swimming over the sea <br />
           </div>
       </div>
     <script type="text/javascript">
        showHideContent('contents_hide');
    </script>
    </body>  
</html>
   

Sekarang kita panggil function javascript-nya pada baris 18 dan 28. Pertama kita lihat baris 19, function ditrigger/dipanggil saat event klik pada link "More About me". Kemudian kita lihat barus 28. Function dipanggil saat halaman web diload, tujuannya supaya content yang tadinya terlihat disembunyikan, jadi pas loading page selesai, content sudah tidak terlihat.

Nah Hasilnya dapat dilihat kotak dibawah ini , coba klik "More About me" :
Name : Hello World
Ability : C++, PHP, MySql, .NET, JAVA, etc
Level : 56
More About me
Magic : Fire, Water, Firaga
Summon : Bahamut, Shiva
Hobby : riding Chocobo, swimming over the sea

Sekian tutorialnya, mudah-mudahan berguna bagi yang membutuhkan .
 

 

Comments for "Hide / Unhide Content using Javascript"

Leave a comment (Click Here)

Name*
E-mail* (not published)
URL
Comment*
Enter validation code