Creating A Vertical Slider With jQuery
<p>How can I create a vertical slider with jQuery? Here's what I've got so far:</p>

<p>JSFIDDLE: <a href="http://jsfiddle.net/vkA2w/" rel="nofollow">http://jsfiddle.net/vkA2w/</a></p>

<p>HTML:</p>

<pre><code>&lt;div id="vslider"&gt;
    &lt;div id="vslidernav"&gt;
        &lt;ul&gt;
            &lt;a id="1"&gt;&lt;li&gt;Box 1&lt;/li&gt;&lt;/a&gt;
            &lt;a id="2"&gt;&lt;li&gt;Box 2&lt;/li&gt;&lt;/a&gt;
            &lt;a id="3"&gt;&lt;li&gt;Box 3&lt;/li&gt;&lt;/a&gt;
            &lt;a id="4"&gt;&lt;li&gt;Box 4&lt;/li&gt;&lt;/a&gt;
            &lt;a id="5"&gt;&lt;li&gt;Box 5&lt;/li&gt;&lt;/a&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="vsliderboxes"&gt;
        &lt;div id="box1" class="active"&gt;&lt;h1&gt;Clean Interface Design&lt;/h1&gt;&lt;/div&gt;
        &lt;div id="box2" class="inactive"&gt;&lt;h1&gt;Efficient Code For Faster Loads&lt;/h1&gt;&lt;/div&gt;
        &lt;div id="box3" class="inactive"&gt;&lt;h1&gt;Work Within Any Budget&lt;/h1&gt;&lt;/div&gt;
        &lt;div id="box4" class="inactive"&gt;&lt;h1&gt;Less Time Building, More Time Using&lt;/h1&gt;&lt;/div&gt;
        &lt;div id="box5" class="inactive"&gt;&lt;h1&gt;Powerful Applications&lt;/h1&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>$(function(){

    boxheight = $('.box').height()
    nextbox = $('.active').next()

    function clickslide(){
    };

    function autoslide(){
        $(nextbox).animate(function(){scrollTop: boxheight}).addClass('active').prev().removeClass('active')
    };

    $('#vslidernav ul a').click(clickslide)
    window.setInterval(autoslide, 2000)

});
</code></pre>

<p>Why doesn't that work? The variable 'next box' picks the active box, then should select the box immediately after it. Then the autoslide function should slide it down. Then it gives itself the active class and removes it from the previous box.</p>

<p>But it doesn't work! Why? Thanks.</p>
