Slide DIV's from left or right using buttons and jQuery
<p>I'm trying to create a function that can slide div's from left or right based on what step you are in the process.</p>

<p>This is my basic structure:</p>

<pre><code>&lt;button type="submit" id="button1"&gt;Go to Step 1&lt;/button&gt;
&lt;button type="submit" id="button2"&gt;Go to Step 2&lt;/button&gt;
&lt;button type="submit" id="button3"&gt;Go to Step 3&lt;/button&gt;

&lt;div id="container"&gt;

    &lt;div id="div1"&gt;Text 1&lt;/div&gt;
    &lt;div id="div2"&gt;Text 2&lt;/div&gt;
    &lt;div id="div3"&gt;Text 3&lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>Using jQuery I have this, but it's <strong>not</strong> what I want:</p>

<pre><code>$('#div1').animate({'width': 0}, 500,function(){ // Slides DIV to left
    $('#div1').css('display','none');
    $('#div1').css('width', 1100); // Set the correct with on DIV again
    $('#div2').fadeIn('slow'); // Fade in new DIV
});
</code></pre>

<p>What I'm after is when I'm in Step 1 and press button two (Go to Step 2) I want div2 to slide in from the right (inside the container-div). When I'm in Step 3 and press button one (Go to Step 1) I want div1 to slide in from the left (inside the container-div) without seeing div2 on the way over. I'we looked at different jQuery sliders but they all handle pictures.</p>

<p>Here is an example that does something along the lines what I what to achieve but does not have the left/right slide functionality: <a href="http://jsfiddle.net/andrewwhitaker/2uV2h/" rel="nofollow noreferrer">http://jsfiddle.net/andrewwhitaker/2uV2h/</a> (source: <a href="https://stackoverflow.com/questions/7549523/how-to-slide-divs-off-on-page-using-jquery">How to Slide div&#39;s off/on page using jQuery</a>). Please ask questions if something is unclear :) Thanks in advanced.</p>

<p><strong>JSFIDDLE:</strong> <a href="https://jsfiddle.net/t5qnw5v5/3/" rel="nofollow noreferrer">https://jsfiddle.net/t5qnw5v5/3/</a></p>