[jQuery] Only show 5 list item, hide the rest?

[mofle]

Hi.

I have an unordered list like this one:

<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>

I want to only show the 5 first items, and hide the rest.

I have a link to toggle the hidden elements on and off:
<a href="#" id="myList-toggle">Show the rest</a>

I use the slideToggle(400) to slide the rest of the list in.

Anyone?


This is what I have now, it just toggles the whole list.
<script type="text/javascript">
      $(document).ready(function() {
        $('#myList').hide();
        $('a#myList-toggle').click(function() {
          $('#myList').slideToggle(400);
          return false;
        });
      });
</script>