I have successfully managed to slide the div left/right based on the answers below, but I am encountering some issues with the top div. Here are the specific changes I am looking to make: 1. Make both brown lines thinner without affecting the animations. 2. Slide the div left/right when clicking on the vertical brown line and resize the width of the top div accordingly. 3. Slide the top div up/down when clicking on the horizontal brown line. I have made some progress with this but it's not perfect. Can someone please assist me further?
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="JQuery.js"></script>
<script src="JQuery-UI.js"></script>
<%-- <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>--%>
<link href="App_Themes/Design.css" rel="stylesheet" />
<link href="App_Themes/PageDesigns.css" rel="stylesheet" />
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$("#showHideDiv").click(function () {
if (!$('#divMenu').hasClass("off")) {
$('#divMenu').animate({ 'margin-left': '-95%' }, 500);
$('#divMenu').addClass("off");
$('.div3').animate({ 'left': '-10%', 'width': '99.3%', 'margin-left': '-10.5%' }, 500);
//$('.div3').animate({ 'left': '-10%', 'width': '99.3%', 'margin-left': '-10.5%' }, 500);
}
else {
$('#divMenu').animate({ 'margin-left': '0px' }, 500);
$('#divMenu').removeClass("off");
$('.div3').animate({ 'left': '-0%', 'width': '89%', 'margin-left': '-0%' }, 500);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="float: left; width: 11%; height: 850px; padding: 0; margin: 0;">
<div id="divMenu" class="">
Sidebar- Menu
</div>
<div id="showHideDiv" style="float: left; height: 850px; width: 5%; background-color: brown;">
</div>
</div>
<div class="div3" style="float: left; width: 89%; ">
<div style="float: left; background-color: #93D209; width: 100%; height: 50px;display:block">
hello
</div>
<div style="height: 0.5%; width: 100%; background-color: brown;display:block">
hi
</div>
</div>
</form>
</body>
</html>