Untitled

Hide what ever exceeds 720px and display the hidden area onClick?
<ul id="bxs" class="tab1">
    <li id="item-1">1</li>
    <li id="item-2">2</li>
    <li id="item-3">3</li>
    <li id="item-4">4</li>
    <li id="item-5">5</li>
    <li id="item-6">6</li>
    <li id="item-7">7</li>
    <li id="item-8">8</li>
    <li id="item-9">9</li>
    <li id="item-10">10</li>
    <li id="item-11">11</li>
    <li id="item-12">12</li>
    <li id="item-13">13</li>
    <li id="item-14">14</li>
    <li id="item-15">15</li>
    <li id="item-16">16</li>
    <li id="item-17">17</li>
    <li id="item-18">18</li>
    <li id="item-19">19</li>
    <li id="item-20">20</li>
</ul>

$("#prev").click(function() {
        page--;
        if (page < 0) page = 0;

        $("#bxs").scrollTop(page * 70);

    });

    $("#next").click(function() {
        page++;

        $("#bxs").scrollTop(page * 70);

        // adjust in case next was clicked and there are no more
        page = $("#bxs").scrollTop() / 70;
    });