Display Only First X Divs, Toggle Rest


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



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.