jquery/css/html sliding panels - Please review

Is there a better way to to do what I'm doing? If not just a general review of how I did it and the usability of it (how it works and function not artistically how it looks). 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 a 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>