Showing Top Repeater items with More link

 <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;"); } }

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';
}