SlideToggle on left side with icon

Navigation
1

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:

    
asked by anonymous 08.05.2015 / 22:51

1 answer

1

I suggest doing this with CSS transition and a toggleClass . So you can make the margin change every time you add the class and use CSS to do 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: link

    
08.05.2015 / 22:59
Get two values from a string How to return a boolean on the button