How to make my nested listview collapsable and expandable

Question

I have a nested ListView like this :

  <asp:ListView runat="server" ID="lvOuter" DataKeyNames="camp_code" OnItemDataBound="lvOuter_ItemDataBound">
                                    <LayoutTemplate>
                                        <ul>
                                            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                                        </ul>
                                    </LayoutTemplate>
                                    <ItemTemplate>
                                        <li>
                                            <%# Eval("camp_name") %>
                                            <asp:HiddenField ID="hf_camp_code" runat="server" Value='<%# Eval("camp_code") %>' />
                                            <asp:ListView runat="server" ID="lvInner">
                                                <LayoutTemplate>
                                                    <ul>
                                                        <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
                                                    </ul>
                                                </LayoutTemplate>
                                                <ItemTemplate>
                                                    <li>
                                                        <asp:HiddenField ID="hf_main_code" runat="server" Value='<%# Eval("main_code") %>' />
                                                        <asp:HiddenField ID="hf_year" runat="server" Value='<%# Eval("year") %>' />
                                                        <asp:LinkButton ID="lbtn_dep" runat="server" CommandName="get_dep"><%# Eval("name") %> (<%# Eval("dep_count") %>)</asp:LinkButton>
                                                    </li>
                                                </ItemTemplate>
                                                <EmptyDataTemplate>
                                                    <ul>
                                                        <li>---</li>
                                                    </ul>
                                                </EmptyDataTemplate>
                                            </asp:ListView>
                                        </li>
                                    </ItemTemplate>
                                    <EmptyDataTemplate>
                                        ---
                                    </EmptyDataTemplate>
</asp:ListView>

---

What i want to do is : Collapsing to the outer list view in the beginning and expand under demand .

for example :

   - 1-OUTER1
      1.1 INNER1
      1.2 INNER2
      1.3 INNER3

   - 2-OUTER2
      2.1 INNER1
      2.2 INNER2
      2.3 INNER3

I want the following in the beginning :

 +OUTER1
 +OUTER2

---

How to get this behavior using my nested ListView ?

---

From FireBug :

<div>
<ul>
<li>
Computer
<input id="ctl00_ContentPlaceHolder1_lvOuter_ctrl0_hf_camp_code" type="hidden" value="1" name="ctl00$ContentPlaceHolder1$lvOuter$ctrl0$hf_camp_code">
<ul>
<li>
<input id="ctl00_ContentPlaceHolder1_lvOuter_ctrl0_lvInner_ctrl0_hf_main_code" type="hidden" value="1" name="ctl00$ContentPlaceHolder1$lvOuter$ctrl0$lvInner$ctrl0$hf_main_code">
<input id="ctl00_ContentPlaceHolder1_lvOuter_ctrl0_lvInner_ctrl0_hf_year" type="hidden" value="2012" name="ctl00$ContentPlaceHolder1$lvOuter$ctrl0$lvInner$ctrl0$hf_year">
<a id="ctl00_ContentPlaceHolder1_lvOuter_ctrl0_lvInner_ctrl0_lbtn_dep" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lvOuter$ctrl0$lvInner$ctrl0$lbtn_dep','')">jm</a>
</li>
....

Answer 1

http://jsfiddle.net/EsWv3/1/

$("li.parent").click( function() {
    $(this).next(".child").toggle("fast");
});

I think this could work for you