<img class="image UP" src="http://s2.uploads.ru/8YZHr.png" onclick="PanelToggleL($('#left-panel'))"/>
<img class="image Down" src="http://s2.uploads.ru/VBqb9.png" onclick="PanelToggleL($('#left-panel'))"/>

<script>function PanelToggleL(a){var b=a.attr('data'),c=a.css('margin-left');a.attr('data',c);a.stop().animate({'margin-left':b},500)}</script>
<style>
#left-panel {
  top:300px;
  padding:0;
  margin-left: -232px;
  position:fixed;z-index:1000;
  left: 0px;
}
.content-L {
  padding:0px;
  width:230px;
  height:236px;
  margin-left:14px;
  margin-top:18px;
  position:absolute;
  color:#fff000;
}
#img-left {
  width:322px;
  height:294px;
  background-image:transparent url(http://vasyliy.mybb.ru/i/blank.gif);
}
</style>

<style>
.image.UP,
.image.Down {
   border:2px solid transparent;
   margin:0;
   padding:0;
}
.image.UP{
opacity:1.0;
   display:block;
   position:absolute;z-index:100;
   transition-duration: 0.76s;
  -webkit-transition-duration: 0.76s;
  -moz-transition-duration: 0.76s;
  -o-transition-duration: 0.76s;
  -ms-transition-duration: 0.76s; /* IE9+ */
}
.image.UP:hover {
   opacity:0.00;
}
 
div.ImgWrap{
position:relative;z-index:-1;
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
</style>

<div data="0" id="left-panel">
<div class="content-L">
  Тут текст
</div>
  <div  class=ImgWrap id="img-left">
  <img class="image UP" src="http://s2.uploads.ru/8YZHr.png"    onclick="PanelToggleL($('#left-panel'))"/>
  <img class="image Down" src="http://s2.uploads.ru/VBqb9.png"/></div>
</div><!-- Конец Левой Панели -->