Login/Subcribe Box dengan Jquery Show ~ [Url]Rhenaldy

DEMO

Letakan Kode Css Berikut ini, tepat sebelum kode ]]></b:skin>


.formcontent{
  font-family:Verdana;
  display:inline-block;
  width:350px;
  background-color:#ffffff;
  margin:10px;
  padding:5px;
  vertical-align:top;
}

.inputstyle{
  background-color:#FEEBC6;
  border:none;
  padding:3px;
}

.actionderoule{
  cursor:pointer;
  font-size:25px;
  font-weight:300;
  color:#666666;
}

.actionenroule{
  cursor:pointer;
  font-size:15px;
  color:#cb2025;
  line-height:15px;
}

Copy / Paste JavaScript di bawah ini , Tepat di atas kode </head>


$(document).ready(function(){

  $('.actionderoule').on( 'click',function(){
  var cible = $(this).attr('cible');
  $('.deroule_'+cible).show("slow");
  $(this).hide("fast");
 });
 $('.actionenroule').on( 'click',function(){
  var cible = $(this).attr('cible');
  $('.deroule_'+cible).hide("fast");
  $('.conteneur_'+cible).children('.actionderoule').show("slow");
 });
});

Lalu Pasang HTML kode berikut sesuai kemauan kalian, bisa di mana saja

<div align='center'>
<div class='conteneur_form1 formcontent'><div class='actionderoule' cible='form1'>
Click here to login</div>
<div style='display:none; font-size:14px;' class='deroule_form1'>
<h2 style='margin:0; color:#00a096; border-bottom:1px solid #005046;'>Login
<div style='position:relative; float:right;'><em><span class='actionenroule' cible='form1'>
X Cancel
</span></em></div>
</h2>
<br>
<input type="text" name="myinput1" value="" class="inputstyle" size="30" placeholder='Your email adress'>
<br>
<input type="text" name="myinput2" value="" class="inputstyle" size="30" placeholder='Your password'>
<br><br>
<input type="submit" value="Login">
</div>
</div>
<div class='conteneur_form2 formcontent'><div class='actionderoule' cible='form2'>
Click here to subscribe</div>
<div style='display:none; font-size:14px;' class='deroule_form2'>
<h2 style='margin:0; color:#00a096; border-bottom:1px solid #005046;'>Subscribe
<div style='position:relative; float:right;'><em><span class='actionenroule' cible='form2'>
X Cancel</span></em></div>
</h2>
<br>
<input type="text" name="myinput1" value="" class="inputstyle" size="30" placeholder='Your Name'>
<br>
<input type="text" name="myinput2" value="" class="inputstyle" size="30" placeholder='Your email adress'>
<br>
<input type="text" name="myinput3" value="" class="inputstyle" size="30" placeholder='Your password'>
<br><br>
<input type="submit" value="Subscribe">
</div>
</div>
</div>