I just wanted to share this script I wrote in that hopes that someone might find it useful and can hopefully simplify it(?).
I'm very new to writing anything with jQuery, so this script is probably bulkier than it needs to be, but it does work.
Here's the full HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Slide Panel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
html{ height:100%;}
body {
margin: 0 auto;
padding: 0;
font: 75%/120% Arial, Helvetica, sans-serif;
height:100%
}
#menu1 {
background: #754c24;
height: 100%;
width:0px;
float:right;
overflow:hidden;
}
#menu2 {
background: #fff;
height: 100%;
width:0px;
float:right;
overflow:hidden;
}
#nav-bar {
background: #333;
height: 100%;
width:30px;
float:right;
}
ul.nav-menu{
padding:0px;
margin:0;
}
ul.nav-menu li{
list-style-type:none;
padding:0px;
width:10px;
height:400px;
}
ul.nav-menu li a{
display:block;
width:100px;
padding:5px;
position:relative;
right:42px;
top:60px;
color:#fff;
text-decoration:none;
}
ul.nav-menu li a.btn-2{
top:160px;
}
ul.nav-menu li a:hover{
background-color:#fff;
color:#000;
}
.rotate {
-webkit-transform: rotate(-90deg); /* Safari */
-moz-transform: rotate(-90deg); /* Firefox */
-ms-transform: rotate(-90deg); /* IE */
-o-transform: rotate(-90deg); /* Opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
}
</style>
</head>
<body>
<div id="menu1">This panel expands Too.</div>
<div id="menu2">This panel expands</div>
<div id="nav-bar">
<ul class="nav-menu">
<li>
<a name="nav" href="#" class="btn-1 rotate">Slide Panel 1</a>
<a name="nav" href="#" class="btn-2 rotate">Slide Panel 2</a>
</li>
</ul>
</div><!--/nav-bar-->
<script type="text/javascript">
$(document).ready(function()
{
var $menu1 = $('#menu1');
var $menu2 = $('#menu2');
$('.btn-1').toggle(
function()
{
if ($menu1.width() == 250)
{
$('#menu1').animate({width: "0"}, 500);
}
else {
$('#menu2').animate({width:'0px'},500);
$('#menu1').delay(500).animate({width:'250px'},500);
}
},
function()
{
if ($menu1.width() == 250)
{
$('#menu1').animate({width: "0"}, 500);
}
else {
$('#menu2').animate({width:'0px'},500);
$('#menu1').delay(500).animate({width:'250px'},500);
}
});
$('.btn-2').toggle(
function()
{
if ($menu2.width() == 250)
{
$('#menu2').animate({width: "0"}, 500);
}
else {
$('#menu1').animate({width:'0px'},500);
$('#menu2').delay(500).animate({width:'250px'},500);
}
},
function()
{
if ($menu2.width() == 250)
{
$('#menu2').animate({width: "0"}, 500);
}
else {
$('#menu1').animate({width:'0px'},500);
$('#menu2').delay(500).animate({width:'250px'},500);
}
});
});
</script>
</body>
</html>
$('#menu1').animate({width: "0"}, 500);
could be$menu1.animate({width: "0"}, 500);
\$\endgroup\$