Cara mudah membuat form login dengan javascript

selamat pagi rekan-rekan programmer, kali ini saya akan share cara membuat menu login dengan javascript. pernahkah melihat nama menu jika diklik akan muncul form baru dibawahnya dan jika diklik lagi maka form tersebut akan hilang. Jika pernah melihatnya maka artikel ini akan membahas tentang menu tersebut, berikut kodenya.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function() {
   var codel="ok";
   $("a#loginid").click(function(){
     if(codel=="ok"){         
       $("div.loginlog").show(90);
       codel ="no";
     }
     else{
       $("div.loginlog").hide(90);
       codel ="ok";
     }
  });
 });
</script>

baris pertama merupakan fungsi javascript untuk mengatur ulang tampilan tanpa refresh halaman. Code 'var codel="ok";' untuk inisialisasi variabel dan nilanya. Code 'a#loginid' pada baris yang ditandai dengan warna merah adalah identifikasi element html id tag <a> contohnya: <a id="loginid">. Element ini sebagai menu dengan nilai Login dan jika menu tersebut diklik maka fungsi didalamnya akan dijalankan. Pada fungsi klik baris yang ditandai warna merah terdapat statement if else, fungsi ini yang menentukan form akan ditampilkan atau disembunyikan. Jika menu diklik pertama kali maka form akan ditampilkan dan menu diklik sekali lagi maka form disembunyikan, agar klik pertama kali form ditampilkan maka variabel 'codel' diberi nilai 'ok' (baris warna biru). pada statement if else, jika variabel codel sama dengan nilai ok maka element <div id="loginlog"> ditampilkan diposisi 90 pixel dibawah element menu dan codel diberi nilai 'no', begitu juga sebaliknya jika codel tidak sama dengan nilai 'ok' akan disembunyikan diposisi 90 pixel sebelum
element <div id="loginlog">.

sampai disini ya, jika ada pertanyaan silakan isi form comment dibawah :-)
untuk program lengkapnya download disini dan disini untuk code css.