http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
I've been jumping between the above trying to get my "tray" to work to no avail. Part of the problem is I don't want one of the divs to disappear completely. I want to have a "tray", a long rectangle that, when clicked, will slide out the div containing the names. Right now I have it set up in reverse, but I can't figure out how to get the div that expands to default to hidden (*I also don't understand why they are different colors, but have the same CSS).
HTML:
<div class ="collapsedTray">
<div class="expandTray">
Joey Joe Joe Jr.</br>
Tommy Thompson Thomas III</br>
Stephen Stephenson </br>
Cool Mo Dee Tomahawk Fire Marshall Bill</br>
</div>
CSS:
.collapsedTray {
width:10px;
height: 500px;
background:grey;
opacity:0.5;
position: absolute;
left:0;
}
.expandTray {
white-space: nowrap;
height: 500px;
background:grey;
opacity:0.5;
position: absolute;
left:0;
padding:8px;
}
J:
$('.collapsedTray').click(function(){
var $lefty = $('.expandTray');
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});