Cara Menyembunyikan Tag Div

Misalnya anda mempunyai file HTML dengan isi:

<h2>Operating System</h2>
<div>
  <ul>
    <li>Microsoft Windows</li>
    <li>Mac OS X</li>
    <li>Ubuntu Linux</li>
    <li>FreeBSD</li>
  </ul>
</div>

Kira2 bentuk tag html diatas seperti dibawah ini:

Operating System

• Microsoft Windows
• Mac OS X
• Ubuntu Linux
• FreeBSD

Anda ingin bila tulisan Operating Sytem ditekan, akan menyembunyikan daftar
Operating System dibawahnya.

Caranya:

1. Tambahkan attribute onclick di tag <h2>
   yang memanggil function Javascript hide(). Jangan lupa tambahkan attribute id pada div.
   Kira-kira isinya menjadi seperti ini:

   <h2 onclick="hide('my-list')">Operating System</h2>
   <div id="my-list">
     <ul>
       <li>Microsoft Windows</li>
       <li>Mac OS X</li>
       <li>Ubuntu Linux</li>
       <li>FreeBSD</li>
     </ul>
   </div>
   

2. Buat Javascript-nya.

   <script type="text/javascript">
     function hide(id) {
       document.getElementById(id).style.display = 'none';
     }
   </script>

   Sekarang kalau anda click tulisan Operating System, daftar dibawahnya akan hilang. Eiittss, ada tapi nya. Kalau di-click lagi
   nggak muncul. Ubah code Javascript diatas menjadi seperti ini:

   <script type="text/javascript">
   function hide(id)
   {
     if (is_hide == true) {
       document.getElementById(id).style.display = 'block';
       is_hide = false;
     }
     else {
       document.getElementById(id).style.display = 'none';
       is_hide = true;
     }
   }
   </script>

Contoh disini menggunakan attribute onclick. Anda bisa saja
membuatnya menggunakan link atau membuat tombol baru dengan <button>.
Dan tentu saja bukan cuma <div> yang bisa disembunyikan. Tag-tag lain juga bisa kok.

Semoga tulisan ini membantu para web developer’s newbie atau yang lupa cara
menyembunyikan suatu content dengan Javascript dan CSS.