Microsoft Techies: slide toggle from right to left and left to right using jquery

Tuesday, 16 September 2014

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>slide demo</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
	<style>
	#toggle
	{
	width: 900px;
	height: 30px;
	background: #ccc;
	}
	</style>
	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
	</head>
	<body>
	<div id="toggle" style="width: 900px; padding-top: 10px;">
	<div style="float: left;">Hello</div>
	<div style="padding-right: 20px; float: right;">
	<div id="close" style="cursor: pointer"><</div>
	<div id="open" style="display: none; cursor: pointer">></div>
	</div>
	</div>

	<script>
	$("#close").click((function () {
	return function () {
	$("#close").hide();
	$("#open").show();
	$("#toggle").animate({
	width: "100px"
	}, 10);
	}
	})());
	$("#open").click((function () {
	return function () {
	$("#close").show();
	$("#open").hide();
	$("#toggle").animate({
	width: "900px"
	}, 10);
	}
	})());
	</script>

	</body>
	</html>

view raw gistfile1.html hosted with ❤ by GitHub