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

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

<!DOCTYPE html>
<html>
<head>
<script src=»http://code.jquery.com/jquery-latest.js»></script>
<style>

</style>
</head>
<body>

<div class=»news»>Первая новость</div>
<div class=»news»>Вторая новость</div>
<div class=»news»>Третья новость</div>
<div class=»news»>Четвертая новость</div>
<a class=»archive» href=»#»></a>

<script>
var news = 2; // — количество отображаемых новостей
hidenews = «- скрыть старые новости»;
shownews = «+ показать все новости»;

$(«.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 );
}
});
</script>
</body>
</html>