Why doesn't this simple toggle work?
<p>Ok firstly - its not a <code>toggle()</code> as such. </p>

<p>This code is supposed to work like a slider. 1 Div is showing, you click a button, and the next div shows, click another button, and the first div shows.</p>

<p>This works so far, but it doesn't work going backwards. So the button works to show the 2nd Div, but hitting the 'less' button I made just makes the second div disappear and the 1st remains hidden. </p>

<p>Here is the code:</p>

<pre><code>$('.more').click(function() {
    $('.c1')
        .animate({ left: "-828px" }, 600, 'easeInOutQuint')
        .delay(300, function() {
            $('.c2').animate({ left: "0px" }, 600, 'easeInOutQuint'); 
        }
    );
});

$('.less').click(function() {
    $('.c2')
        .animate({ left: "828px" }, 600, 'easeInOutQuint')
        .delay(300, function(){
            $('.c1').animate({ left: "0px" }, 600, 'easeInOutQuint'); 
        }
    );
});
</code></pre>

<p>What am I missing? And how could I do this so that I'm basically not repeating the same code twice?</p>
