Ограничение количества отображаемых элементов списка

<< Рецепты

Если вам необходимо отображать список элементов (например новостей) и вы не знаете из скольки элементов он может состоять, но хотели бы, чтобы он не занимал много места, то неплохим вариантом будет отображать определенное количество элементов и ссылку "показать все": 

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~

  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~

  ~lt~div class="news"~gt~Первая новость~lt~/div~gt~
  ~lt~div class="news"~gt~Вторая новость~lt~/div~gt~
  ~lt~div class="news"~gt~Третья новость~lt~/div~gt~
  ~lt~div class="news"~gt~Четвертая новость~lt~/div~gt~
  ~lt~a class="archive" href="#"~gt~~lt~/a~gt~

  ~lt~script~gt~
    var news = 2; // - количество отображаемых новостей
    hidenews = "- скрыть старые новости";
    shownews = "+ показать все новости";

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

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

Используемые методы jQuery