Question

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

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 .