Show / hide part of the list

Question

I have a (unordered) list (repeater generated) of items. However, I would like to show the first three elements and the rest with a main contentdiv. When the button is pressed, I would like the div list to expand by pushing the main contentdiv down and showing the rest of the list. I was thinking about using slideDown (), but this closes the entire div (and I would like to show the first 3 elements of the list). What would be the best way to achieve this effect? Is there a plugin that can easily show X list items and display the rest upon request?

thank

edit: add current code:

   <div id="name_links">
        <asp:Repeater ID="rptName" runat="server">
        <ItemTemplate>
        <ul class="ul_links">
        <li>

        <a id="aName"  runat="server" href=<%# Eval("Name")%> >
    <%# Eval("Name")%> 
      </a>

        </li>
        </ul>
        </ItemTemplate>
        </asp:Repeater>
    </div>

<div id="main_content" >
...
</div>

I tried adding this jQuery, but it does not seem to pick up any of the links:

    $("ul.ul_links").each(function() {
        $(this).children("li:gt(3)").hide();

        alert("Testing"); //This never gets called. 
    });

Answer 1

 <div id="name_links">
     <ul class="ul_links">
    <asp:Repeater ID="rptName" runat="server">
    <ItemTemplate>
    <li>

    <a id="aName"  runat="server" href=<%# Eval("Name")%> ><%# Eval("Name")%> 
  </a>

    </li>
    </ItemTemplate>
   </asp:Repeater>
  </ul>
</div>

jquery .

ul → li.

Answer 2

jQuery, .

, ul/li. .

4 :

$('div:gt(2)').hide(); //index starts at 0

jquery, , $(document).ready(), .