Efeito SlideLeft

by Jader Wagner

HTML

<div class='container'>
    <div class='painel'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet velit at odio cursus pretium. Sed laoreet tincidunt nibh quis vestibulum. Curabitur egestas eros id mauris tempor ultrices. Maecenas at erat felis.</div>
    <div class='disparador'></div>
</div>
<div class='container'>
    <div class='painel'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet velit at odio cursus pretium. Sed laoreet tincidunt nibh quis vestibulum. Curabitur egestas eros id mauris tempor ultrices. Maecenas at erat felis.</div>
    <div class='disparador'></div>
</div>
<div class='container'>
    <div class='painel'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet velit at odio cursus pretium. Sed laoreet tincidunt nibh quis vestibulum. Curabitur egestas eros id mauris tempor ultrices. Maecenas at erat felis.</div>
    <div class='disparador'></div>
</div>

CSS

.container {
    position: relative;
    width:200px;
    height: 350px;
    float: left;
    margin-right:5px;
}
.painel {
    display:none;
    width: 100px;
    height: 350px;
    overflow: auto;
    position:absolute;
    top: 0;
    left:0;
}
.disparador {
    width: 200px;
    min-width: 50%;
    height: 350px;
    position:absolute;
    top: 0;
    right:0;
    background-color: red;
}

JavaScript

$('.disparador').click(function () {
    $('.disparador').not(this).animate({
        width: 200
    });
    $('.painel').not($(this).siblings('.painel')).animate({
        width: 'hide'
    });
    
    $(this).animate({
        width: ($(this).width() == 200 ? 100 : 200)
    });
    $(this).siblings('.painel').animate({
        width: 'toggle'
    });
});