How to expand contents of ItemTemplates of a ListView by clicking on ItemTemplate?

Question

I have a ListView with a number of ItemTemplates. There is a Repeater in each ItemTemplate, showing list of files in each ItemTemplate (i.e. category). Currently, all files in all categories are visible. But I want to show the categories only, and by clicking on each category, expand it and show the files in that category.

How can I do that?

Below is my current code:

<asp:ListView runat="server" ID="lvDownloadFilesViewer">
    <ItemTemplate>  
        <div class="downloadList-Headline">
            <%#Eval("Title")%>
        </div>

        <div class="downloadList">
            <ul>                
                <asp:Repeater ID="Repeater1" runat="server" EnableViewState="false"     DataSource='<%# DataBinder.Eval(Container.DataItem, "DownloadFilesItemList") %>'>                   

                <ItemTemplate>                                       
                    <li style="width:100%">
                        <div class="FileDescription"><%# DataBinder.Eval(Container.DataItem, "Description")%>
                        </div>                            
                    </li>
                </ItemTemplate>

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

Answer 1

use this:

<style>
    .downloadList
    {
        display: none;
    }
    .downloadList-Headline
    {
        cursor: pointer;
    }
</style>
<script>
    $(document).ready(function () {
        $('.downloadList-Headline').click(function() {
            $(this).next().toggle('medium');
        });
    });
</script>
<asp:ListView runat="server" ID="lvDownloadFilesViewer">
    <ItemTemplate>
        <div class="downloadList-Headline">
            [+] <%#Eval("Title")%>
        </div>
        <div class="downloadList">
            <ul>
                <p></p>
                <asp:Repeater ID="Repeater1" runat="server" EnableViewState="false" DataSource='<%# DataBinder.Eval(Container.DataItem, "DownloadFilesItemList") %>'>
                    <ItemTemplate>
                        <li style="width:100%">
                        <div class="FileDescription"><%# DataBinder.Eval(Container.DataItem, "Description")%></div>
                        <a href="<%#Page.ResolveClientUrl((string)Eval("FilesPath")) %>" class="<%# DataBinder.Eval(Container.DataItem, "FilesTypeTitle")%>"
                    target="_blank">
                    <%# DataBinder.Eval(Container.DataItem, "FilesTitle")%></a>
                    </li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
        </div>
    </ItemTemplate>
</asp:ListView>