Скрыть элементы после определённого их количества

[Menro]

Добрый день!
Помогите решить следующею задачу:

1. Есть список

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

2. Необходимо скрывать все li после, например 3-го. То есть дописать 4-му и 5-му <li> класс, например hide.

Покопался в сети и нашёл вот такое решение:

<script>
jQuery(function($) {
        $("ul").ready(function () {
            max = 2;
            i = 0;
            $("ul li").each(function() {
                i += 1;
                if(i > max) {
                    $(this).addClass("hide");
                }
            })
        });
        });
</script>

3. В идеале хочу сделать так, что бы появлялась кнопка "Показать скрытые" при клике на которую убирался этот класс hide.

Заранее большое спасибо!

 

[wiggly]

Может быть как то так ?

Для просмотра ссылки Войди или Зарегистрируйся

 

[Absolute]

$(document).ready(function(){
  $('ul li').slice(3).hide();
});

 

[wiggly]

3. В идеале хочу сделать так, что бы появлялась кнопка "Показать скрытые" при клике на которую убирался этот класс hide.

Ну и конечно Ваш код можно всегда оптимизировать, использую лучшие функции.

Заапдейтил фиддл.