hemantajax/myinfo.html

## myinfo.html
<!doctype html>
<html>
<head>
	<title>My Info</title>
	<meta charset="utf-8" />
	<style>
		#wrapper{
			width:220px;
			height:420px;
			margin:40px auto;
			position:relative;
		}

		#mypic,#myinfo{
			width:278px;
			height:250px;
			border:10px solid #f0f0f0;
		}
		 #myinfo{
		 	width:258px;
			background-color: #0ff;
			padding:10px;
		}
		.js #myinfo{
			position: absolute;
			background-color: #0ff;
			padding: 10px;
			display: none;
			top:0;
		}

		#myinfo span{
			position: absolute;
			right:10px;
			top:0;
			cursor:default;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="mypic">
			<img src="http://hemantajax.kodingen.com/portfolio/html5-portfolio/images/me.jpg" alt="Me" />
		</div>
		<div id="myinfo">
			<h2>Contact Detail:</h2>
			<div>Hemant Kumar Singh</div>
			<div>Email: hemant.ajax@gmail.com</div>
			<div>Phone: +91 7799111008</div>
		</div>
	</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
	(function(){
		$('html').addClass('js');

		var myInfo={
					container: $('#myinfo'),

					config: {
						effect: 'slideToggle',
						speed: 500
					},

					init: function(config) {
						$.extend(this.config, config);

						$('<button></button>', {
							text: 'Contact Me'
						})
							.insertAfter( '#mypic' )
							.on( 'click', this.show );
					},

					show:function(){
						var container=myInfo.container,
							cf=myInfo.config;
						$(this).hide();
						container[cf.effect](cf.speed);
						myInfo.close.call(container);
					},

					close:function(){
						var $this=$(this),
							cf=myInfo.config;
						$("<span>x</span>").appendTo(this).on("click",function(){
							$this[cf.effect](cf.speed);
							$("#wrapper").find("button").show();
						});
					}
		};

		myInfo.init({
			//effect:"fadeToggle"
		});

	})();
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>My Info</title>
	<meta charset="utf-8" />
	<style>
	#wrapper{
	width:220px;
	height:420px;
	margin:40px auto;
	position:relative;
	}

	#mypic,#myinfo{
	width:278px;
	height:250px;
	border:10px solid #f0f0f0;
	}
	#myinfo{
	width:258px;
	background-color: #0ff;
	padding:10px;
	}
	.js #myinfo{
	position: absolute;
	background-color: #0ff;
	padding: 10px;
	display: none;
	top:0;
	}

	#myinfo span{
	position: absolute;
	right:10px;
	top:0;
	cursor:default;
	}
	</style>
	</head>
	<body>
	<div id="wrapper">
	<div id="mypic">
	<img src="http://hemantajax.kodingen.com/portfolio/html5-portfolio/images/me.jpg" alt="Me" />
	</div>
	<div id="myinfo">
	<h2>Contact Detail:</h2>
	<div>Hemant Kumar Singh</div>
	<div>Email: hemant.ajax@gmail.com</div>
	<div>Phone: +91 7799111008</div>
	</div>
	</div>




	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
	(function(){
	$('html').addClass('js');

	var myInfo={
	container: $('#myinfo'),

	config: {
	effect: 'slideToggle',
	speed: 500
	},

	init: function(config) {
	$.extend(this.config, config);

	$('<button></button>', {
	text: 'Contact Me'
	})
	.insertAfter( '#mypic' )
	.on( 'click', this.show );
	},

	show:function(){
	var container=myInfo.container,
	cf=myInfo.config;
	$(this).hide();
	container[cf.effect](cf.speed);
	myInfo.close.call(container);
	},

	close:function(){
	var $this=$(this),
	cf=myInfo.config;
	$("<span>x</span>").appendTo(this).on("click",function(){
	$this[cf.effect](cf.speed);
	$("#wrapper").find("button").show();
	});
	}
	};

	myInfo.init({
	//effect:"fadeToggle"
	});

	})();
	</script>
	</body>
	</html>