when click the Login button login box will appear below the button.
screen shot of login boxJquery code for this example
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".flip1").hide();
$(".box").hide();
$(".flip").click(function ()
{
$(".box").slideToggle(1000);
$(".flip1").show();
$(".flip").hide();
});
$(".flip1").click(function ()
{
$(".box").slideToggle(1000);
$(".flip1").hide();
$(".flip").show();
});
});
</script>
html login form
<body>
<p class="flip">Login</p>
<p class="flip1">Login</p>
<div class="box">
Username<input type="text" name="user"> <br/><br/>
Password <input type="password" name="password"><br/>
<input type="submit" value="Submit"/>
</div>
</body>
simple CSS style sheet
<style type="text/css">
div.box
{
margin:0px;
padding:15px;
text-align:center;
background:#e5eecc;
}
div.box
{
height:100px;
width:300px;
display:none;
}
p.flip ,p.flip1
{
height:20px;
width:100px;
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
}
</style>
No comments:
Post a Comment