Hiding Repeater Items

I have a list of items displayed in a repeater. By default, I want to show the top 10 items. On click of a linkbutton, I want to show the remaining items. How can i do this? (Forum Link)

I have created a repeater bound to a SqlDataSource. The repeater is having a list of items displayed in an unordered list (ul). In FooterTemplate, I am having two linkbuttons. One is used for showing all items, another is used for hiding all but the top 10 items. The code is:

 <asp:Repeater ID="rpt" runat="server" DataSourceID="sql"
 OnItemDataBound="rpt_ItemDataBound">
 <HeaderTemplate>
   <ul id="list">
 </HeaderTemplate>
 <ItemTemplate>
    <li id="listItem" runat="server">
        <%# Eval("au_lname") %>
    </li>
 </ItemTemplate>   
 <FooterTemplate>
    </ul>
    <a id="show" href="javascript:show();">Show All</a>
    <a id="hide" href="javascript:hide();" style="display:none;">Hide</a>
 </FooterTemplate>
 </asp:Repeater>
<asp:SqlDataSource ID="sql" runat="server" 
ConnectionString="<%$ ConnectionStrings:Pubs %>"
 SelectCommand="SELECT au_lname FROM Authors">
 </asp:SqlDataSource>

In OnItemDataBound event handler, from the 11th item onwards, I am using style="display: none;" to hide the items as follows:

protected void rpt_ItemDataBound(object sender, RepeaterItemEventArgs e)
{

    if (e.Item.ItemIndex >= 10)
    {
        HtmlGenericControl li = e.Item.FindControl("listItem") 
					as HtmlGenericControl;
        li.Attributes.Add("style", "display: none;");
    }

}

Finally, the javascript for Show and Hide buttons. In the show function, we are getting a list of all items (li) within a ul. If ItemIndex > 10, then we change the display style of the item to 'block'. This shows the list item (li). The code is as follows:

<script type="text/javascript" >

    function show() {
        var list = document.getElementById('list').getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
            if (i >= 10) {
                list[i].style.display = 'block';
            }

        }

        document.getElementById('hide').style.display = 'inline';
        document.getElementById('show').style.display = 'none';
    }
     
    function hide() {
        var list = document.getElementById('list').getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
            if (i >= 10) {
                list[i].style.display = 'none';
            }
        }

        document.getElementById('hide').style.display = 'none';
        document.getElementById('show').style.display = 'inline';
    }
    
    
</script>