jQuery Click to Slide Back and Forth

Click once to slide an element left then click again to slide the element right.

by Colin Soderstrom

HTML

<div id="clckSld"><p>Click to Slide</p></div>
<div id="lftRgt"></div>

CSS

#clckSld {
    padding: 0px 15px;
    background-color: gray;
    font-family: arial;
    display: inline-block;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 5px;
}
#clckSld p {
    color: #fff;
}
#lftRgt {
    background-color: #ff0000;
    width: 100px;
    height: 100px;
}

JavaScript

pos = 'left';

$('#clckSld').click(function() {
    if (pos == 'left'){
        $('#lftRgt').animate({
            marginLeft: "50%"
        }, 1000 );
        pos = 'right';
    }
    else {
        $('#lftRgt').animate({
            marginLeft: "0%"
        }, 1000 );
        pos = 'left';
    }
});