Боковая выплывающая панель

by Богдан Криворучко

HTML

<div class="block">
<div class="lenta"> X</div>
    <div class="panel">
        контент
    </div>
    
<div class="block block2">
<div class="lenta"> X</div>
    <div class="panel">
        контент
    </div>
</div>
</div>

CSS

.block {
    position: fixed;
    top: 100px;
    left: -240px;
}

.block2 {
    top: 300px;
}

.lenta {
    background-color: #004B80;
    height: 30px;
    line-height: 30px;
    color: #FFFFFF;
    padding: 5px;
    text-align: center;
    width: 30px;
    position: absolute;
    right: -40px;
}

.panel {
    background-color: #EDEDED;
    color: #000000;
    min-height: 150px;
    padding: 10px 20px;
    text-align: left;
    width: 200px;
}

.lenta:hover {
    cursor: pointer;
}

JavaScript

$(document).ready(function() {
  $(".lenta").parent().addClass('closed');  
    
 $(".lenta").click(function () {
     var father = $(this).parent();
      if (father.hasClass('closed')) {
        father.removeClass('closed').addClass('opened');
        father.animate({left: "0"}, 500 );
      } else if (father.hasClass('opened')) {
        father.removeClass('opened').addClass('closed');
        father.animate({left: "-240px"}, 500 );   
      }
});
 
});