PSD to HTML conversion PSD to HTML conversion PSD2HTML.com with over 300 professionals takes the designs to HTML and beyond

Code Snippet

Home » Code Snippets » jQuery » Display Only First X Divs, Toggle Rest

Display Only First X Divs, Toggle Rest

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 );
       }
});

HTML:

<div class="news">First news</div>
<div class="news">Second news</div>
<div class="news">Third news</div>
<a class="archive" href="#"></a>

Reference URL

Subscribe to The Thread

  1. sweet, thank you!

  2. Excellent, thanks for this =)

  3. Sorry, the reference URL has not been available for a long time. It’s fixed now!

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~