Cara Memunculkan Div Tanpa jQuery

Share:

Hello Worlds! Tidak jarang ketika bikin laman website, pasti ada konten yang disembunyikan, dan akan ditampilkan jika pengguna mengklik tombol (yang sudah ditentukan). Biasanya, hal ini diterapkan dengan alasan agar tidak menghalangi konten yang lainnya, yang bertumpukan, seperti halnya sub menu.

Untuk memunculkan konten yang tersembunyi ini, kita terbiasa dengan yang namanya jQuery. Ya, memang dengan jQuery semua manipulasi konten bisa dilakukan dengan mudah tanpa mengetikkan script-script yang cukup ribet. Mungkin bisa dibilang penggunaan jQuery ini berat rasanya jika ditinggalkan, sudah melekat di hati para front-end web developer.

Tapi... pernahkah Anda berpikir gimana sih caranya memunculkan konten layaknya efek show() tanpa jQuery? Mungkin Anda berpikir hal ini bisa dilakukan dengan memakai CSS. Apakah pakai :hover ? Ataukah pakai :active ? Kalau pakai hover kalau kontennya deket sama pointer sih bisa, tapi kalau jauh? Misalkan kalau yang dimunculin itu popup gimana? Kan nggak bisa. Kalau pakai active sih malah jelas gak bisa, pas klik mouse dilepas kontennya hilang lagi.

Maka caranya dengan memakai Javascript (murni).

Nah, gimana sih caranya munculin konten pakai Javascript murni ini? Mula-mula buat file HTML seperti berikut.

<html>
<head>
     <title>Belajar Munculin Konten</title>
     <style>
          #area { display:none; }
     </style>
</head>
<body>

<button id="tombol">Klik Saya</button>
<div id="area">ini seharusnya muncul</div>

</body>
</html>

Simpan kodingan diatas dengan format biasanya, HTML. Lalu, tambahkan script di bawah ini tepat di atas kode </head>.

<script type="text/javascript">
     var area = document.getElementById('area');
     var tbl = document.getElemetById('tombol');
     tbl.onclick = function() {
          area.style.display = "block";
     }
</script>

Simpan. Kodingan Javascript diatas merupakan fungsi yang berfungsi memunculkan konten (div) dengan id #area ketika tombol dengan id #tombol. Anda juga bisa memodifikasinya sendiri, seperti menambahkan warna background, menambah panjang area, atau efek CSS yang lainnya.

Tapi, kalau dilihat-lihat, jadi males ngelihatnya ya. Ribet gitu. Beda dengan framework jQuery yang cuma ngetik $("#elemen").show(300); Udah gampang, minimalis, ada efek animasinya juga. Pokoknya top deh jQuery itu. Kalau ada dana lebih, Anda bisa menyumbang pengembangnya biar bisa lebih bagus lagi kedepannya. Semoga bermanfaat.....

2 comments:

  1. kalo pake JS murni capek bang, haha :D

    ReplyDelete
    Replies
    1. makanya, jangan pernah ninggalin jQuery. Jadikan jQuery sebagai soulmate kamu ;*

      Delete