jQuery onclick show next hide first vissible div
<p>I have a set of divs and I only want to display 4 at a time.  By default you see 1,2,3,4 when you click on next you should see 2,3,4,5 if you then click next you should see 3,4,5,6 and if you click prev you should see 1,2,3,4, if you click prev initially I would like nothing to happen. and when you get to the end I would like nothing to happen on next click.</p>

<p>Currently this is what I have but it seems to be a fair way off?, (<a href="http://jsfiddle.net/aaronk85/dRfb4/4/" rel="nofollow">click here</a>), </p>

<pre><code>    &lt;div class="testwrap"&gt;
        &lt;div class="testtitle"&gt;
            &lt;h3&gt;Test title 1&lt;/h3&gt;
        &lt;/div&gt;
    &lt;span style="float:left" id="prev"&gt;prev&lt;/span&gt;

        &lt;div class="testclass test1"&gt;1&lt;/div&gt;
        &lt;div class="testclass test2"&gt;2&lt;/div&gt;
        &lt;div class="testclass test3"&gt;3&lt;/div&gt;
        &lt;div class="testclass test4"&gt;4&lt;/div&gt;
        &lt;div class="testclass test5"&gt;5&lt;/div&gt;
        &lt;div class="testclass test6"&gt;6&lt;/div&gt;
        &lt;div class="testclass test7"&gt;7&lt;/div&gt;
        &lt;div class="testclass test8"&gt;8&lt;/div&gt;
        &lt;div class="testclass test9"&gt;9&lt;/div&gt;
        &lt;div class="testclass test10"&gt;10&lt;/div&gt;
    &lt;span style="float:right" id="next"&gt;next&lt;/span&gt;

    &lt;/div&gt;

    &lt;script&gt;
    $('.testclass:gt(3)').hide();

    $('#prev').click(function() {
        var first = $('.testwrap').children('.testclass:visible:first');
        first.prevAll('.testclass:lt(1)').show();
        first.prev().nextAll('.testclass').hide()
    });

    $('#next').click(function() {
        var last = $('.testwrap').children('.testclass:visible:last');
        last.nextAll('.testclass:lt(1)').show();
        last.next().prevAll('.testclass').hide();
    });
    &lt;/script&gt;

    &lt;style&gt;
    .testwrap {
        float: left;
        background: orange;
        width: 500px;
    }

    .testclass {
        background: none repeat scroll 0 0 yellow;
        border: 1px solid red;
        float: left;
        font-size: 28px;
        height: 40px;
        margin: 7px 3px;
        overflow: hidden;
        width: 100px;
        text-align: center;
    }
    .testtitle {
        float:left;
        display:inline;
        width: 100%;
    }
    &lt;/style&gt;
</code></pre>
