Usability of sliding panels

Question

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

<div id="panels">
    <div class="panel">
        <div class="tab"><div>Tab A</div></div>
    </div>
    <div class="panel">
        <div class="tab"><div>Tab B</div></div>
    </div>
    <div class="panel">
        <div class="tab"><div>Tab C</div></div>
    </div>
    <div class="panel">
        <div class="tab"><div>Tab D</div></div>
    </div>
</div>

Answer 1

• 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 </body> , 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