Usability of sliding panels Is there a better way to do what I'm doing? If not, I'd like just a general review of how I did it and the usability of it (how it works and functions, not artistically how it looks).

Here is the working JSFiddle.

JavaScript



$(document).ready(function () {
    // initlize panels
    $('.panel').each(function (i) {
        var $tab = $(this).children('.tab');
        $tab.css({ 'top': $tab.position().top + i * ($tab.height() + 5) });
    });
    $('.tab').click(function () {
        var $panel = $(this).parent();
        if ($panel.attr('data-open') == 'yes') {
            $panel.animate({
                left: '-=300'
            }, 1000, function () {
                // Animation complete.
            });
            $panel.attr('data-open', 'no');
        } else {
            $('.panel').css({ 'z-index': 0 });
            $panel.css({ 'z-index': 1 });
            $panel.animate({
                left: '+=300'
            }, 1000, function () {
                // Animation complete.
            });
            $panel.attr('data-open', 'yes');
        }
    });
});


CSS



body
{
    margin: 0px;
    padding: 0px;
    font-family: Arial;
}
.panel
{
    position:absolute;
    top: 0px;
    bottom: 0px;
    left: -300px;
    width: 299px;
    border-right: 1px solid black;
    background-color: White;
}

.tab
{
    position: absolute;
    top: 10px;
    width: 16px;
    right: -17px;
    height: 75px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    cursor: pointer;
    background-color: White;
}

.tab div 
{
    position: relative;
    display: block;
    left: 1px;
    top: -15px; /* Same as height */
    width: 75px; /* Same as .tab height */
    height: 15px;
    font-size: 14px;
    font-weight:normal;
    line-height: 15px;
    text-align: center;
    -moz-transform:rotate(-270deg); 
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin:  bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    vertical-align: top;
}


CSS - in an IE-only CSS file

.tab div
{
    top: 0;
}


HTML



&lt;div id="panels"&gt;
    &lt;div class="panel"&gt;
        &lt;div class="tab"&gt;&lt;div&gt;Tab A&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel"&gt;
        &lt;div class="tab"&gt;&lt;div&gt;Tab B&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel"&gt;
        &lt;div class="tab"&gt;&lt;div&gt;Tab C&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel"&gt;
        &lt;div class="tab"&gt;&lt;div&gt;Tab D&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
your tab label seems to exist within the content which it is tabbing .. kinda bad, don't you think.
there is no point in using $(document).ready(), just put your script file right before &lt;/body&gt; , and it will already be executing, when the DOM is done.
instead of adding function for each .tab tag's onclick separately, you should read about event delegation and use that
use closures for storing the active tab, instead of DOM. DOM manipulations are slow
setting top and bottom values in CSS fails to do what you want on IE7
animation quality on IE9 is horrid