Display/Hide part of a list

Question

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

Thanks

edit: Adding 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've tried to add this JQuery, but it doesn't 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

This can be done with jQuery, but it would help to see example of your markup.

Here's a link showing how you could do it with ul/li tags. You should be able to adapt it to your own markup without too much trouble.

Typically you hide item 4 and out with:

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

You have to modify the jquery selector to fit your markup and you could put it in a $(document).ready() block in order to hide the items on page load.

Answer 2

You item template looks wrong

It should be

 <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>

Then jquery will be able to show and hide as desired.

The other way you were creating sets of ul -> li tags .