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.

Iklan

Satu pemikiran pada “Cara Menyembunyikan Tag Div

  1. dicoba di firefox kok ndak bisa ya!? ato khusus di IE? di IE 7 pun ndak bisa nih.. ada cara buat bisa di firefox?

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s