I have tried this much code. Please refer it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<script>
$(document).ready(function () {
$("#box2").click(function () {
if ($("#hdValue").val() == "0") {
$("#box").animate({ width: "300px" });
$("#facebookTable").css('visibility', 'visible');
$("#box2").css({ 'display': 'block', 'left': '315px' });
$("#hdValue").val("1");
}
else {
$("#facebookTable").css('visibility', 'hidden');
$("#box2").css({ 'display': 'fixed', 'left': '22px' });
$("#box").animate({ width: "10px" }, "slow");
$("#hdValue").val("0");
}
});
});
</script>
</head>
<body>
<input type="hidden" id="hdValue" name="name" value="0" />
<div id="box" style="background: #98bf21; width: 10px; margin: 6px; position: absolute;
display: block">
<table border="0" id="facebookTable" cellpadding="0" cellspacing="0" style="visibility: hidden">
<tr>
<td>
Name
</td>
<td>
<input type="text" name="name" value="" />
</td>
</tr>
<tr>
<td>
City
</td>
<td>
<input type="text" name="name" value="" />
</td>
</tr>
<tr>
<td>
Country
</td>
<td>
<input type="text" name="name" value="" />
</td>
</tr>
</table>
</div>
<div id="box2" style="background: red; width: 30px; position: fixed; top: 14px; left: 22px;
height: 98px;">
click
</div>
</body>
</html>
Demo
