Collapsible / Sliding "Tray" (Div)

Question

Slide right to left?

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).

http://jsfiddle.net/r6yWP/

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
});
    });

Answer 1

Give left value a negative value in CSS so that it hides by default.

.expandTray {
   left:-999px;
}

see fiddle

And the different colors is because you have the expandTray inside the collapsedTray, both having an opacity of 0.5 hence inner div has more opacity.