Widget: Sliding Toggle

(JQuery 1.9.1) Click on a div to have it fade-out/slide-left and have another div fade-in/slide-left to take it's place. Click again to toggle back & have the reverse happen.

by Don Schaefer

HTML

<div id="div1">Block 1: Click Here</div>
<div id="div2">Block 2: Click Here</div>

CSS

div {
    display: inline;
    position: relative;
    cursor: pointer;
    background-color: #ccc;
    padding: 20px;
}
#div2 {
    opacity: 0;
}
.displayNone {
    display: none;
}

JavaScript

$('div').click(function () {
    var divWidth = $('#div1').outerWidth();
    var leftDefault = 8; 
    //Note: normally the leftDefault would be 0, but JSFiddle has an 8px margin on the body tag
    
    if ($('#div1').position().left === leftDefault) {
        $('#div1').animate({
            opacity: 0,
            left: '-=' + divWidth
        }, 1000, function () {
            // Animation complete.
        });
        $('#div2').animate({
            opacity: 1,
            left: '-=' + divWidth
        }, 1000, function () {
            // Animation complete.
        });
    } else {
        $('#div1').animate({
            opacity: 1,
            left: '+=' + divWidth
        }, 1000, function () {
            // Animation complete.
        });
        $('#div2').animate({
            opacity: 0,
            left: '+=' + divWidth
        }, 1000, function () {
            // Animation complete.
        });
    }
});