onclick shownext hide first

HTML

<div class="testwrap">
    <div class="testtitle">
        <h3>Test title 1</h3>
    </div>
<span style="float:left" id="prev">prev</span>

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

</div>

CSS

.testwrap {
    float: left;
    background: orange;
    width: 100%;
}

.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: 100%;
    text-align: center;
}
.testtitle {
    float:left;
    display:inline;
    width: 100%;
}

JavaScript

$('.testclass:gt(0)').hide();

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

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