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

StackExchange Code Review Q#6491, answer score: 2