Slidetoggle on left side with icon

Question

I have the following code:

HTML:

<div id="slideleft" class="slide">
    <button type="button" class="btn-event">ICON</button>
    <div class="inner" style="left: -338px;">Efeito lateral de toogle.  </div>
</div>

CSS:

    .slide .inner  {
  position:absolute;
  left:0;
  bottom:0;
  color: #66cc66;
}

.slide {
    position:relative;
    overflow:hidden;
    height:120px;
    width:350px;
    margin:1em 0;
    background-color:#ffc;
    border:1px solid #999;
}

.slide .inner {
    position:absolute;
    left:0;
    bottom:0;
    width:338px;
    height:36px;
    padding:6px;
    background-color:#4c5;
    color:#333;
}

.slide button {margin:.7em 0 0 .7em;}

#slidebottom .inner {display:none;}

JAVASCRIPT:

$(document).ready(function() {
  $('#slideleft button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({  
        left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
    });
  });
});

How can I adapt my code to generate the following effect:

Answer 1

I suggest doing this with CSS transition and a toggleClass. So you can make the margin change each time you add the class and use CSS to make the animation.

$(document).ready(function () {
    $('#slideleft button').click(function () {
       $(this).toggleClass('aberto').next().toggleClass('aberto');
    });
});

and CSS:

.slide .aberto{
    margin-left: 200px;
}
.slide * {
    transition: margin-left 1s;
}

jsFiddle: http://jsfiddle.net/4L6kpfdz/2