Advanced Search

Display Only First X Divs, Toggle Rest

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. var news = 2;
  2. hidenews = "- Hide news archive";
  3. shownews = "+ Show news archive";
  4.  
  5. $(".archive").html( shownews );
  6. $(".news:not(:lt("+news+"))").hide();
  7.  
  8. $(".archive").click(function (e) {
  9.    e.preventDefault();
  10.        if ($(".news:eq("+news+")").is(":hidden")) {
  11.            $(".news:hidden").show();
  12.            $(".archive").html( hidenews );
  13.        } else {
  14.            $(".news:not(:lt("+news+"))").hide();
  15.            $(".archive").html( shownews );
  16.        }
  17. });
  18.  
  19. <div class="news">First news</div>
  20. <div class="news">Second news</div>
  21. <div class="news">Third news</div>
  22. <a class="archive" href="#"></a>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.