Display Only First X Divs, Toggle Rest with jQuery

    June 28, 2012 | jQuery Snippets

    [javascript]
    var news = 2;
    hidenews = "- Hide news archive";
    shownews = "+ Show news archive";

    $(".archive").html( shownews );
    $(".news:not(:lt("+news+"))").hide();

    $(".archive").click(function (e) {
    e.preventDefault();
    if ($(".news:eq("+news+")").is(":hidden")) {
    $(".news:hidden").show();
    $(".archive").html( hidenews );
    } else {
    $(".news:not(:lt("+news+"))").hide();
    $(".archive").html( shownews );
    }
    });

    <div class="news">First news</div>
    <div class="news">Second news</div>
    <div class="news">Third news</div>
    <a class="archive" href="#"></a>
    [/javascript]
    Snippet : Source

    Leave a Reply