Create Accordion for menu and submenu

Question

I want to create a vertical menu with submenu in asp.net using bootstrap. I created with ul and li. Menu are displayed but when clicked submenus are not displayed. below is the code.

-------------------------------------------------------------------------------------------

<div class="left-side">

<h3 class="agileits-sear-head">

Food Preference</h3>

<ul>

<asp:DataList ID="dlCategory" runat="server" RepeatColumns="1" RepeatDirection="Vertical">

<ItemTemplate>

<li class="collapse"><i class="fa fa-plus"></i><span><a href="#collapse" data-toggle="collapse">

<%#Eval("Category_Name") %></a></span></li>

<ul id="collapse" class="collapse">

<asp:DataList ID="dlProducts" runat="server" RepeatColumns="1" RepeatDirection="Vertical">

<ItemTemplate>

<li><span><a href="#">

<%#Eval("Product_Name") %></a></span></li>

</ItemTemplate>

</asp:DataList>

</ul>

</ItemTemplate>

</asp:DataList>

</ul>

<%-- <ul>

<li>

<input type="checkbox" class="checked">

<span class="span">Vegetarian</span>

</li>

<li>

<input type="checkbox" class="checked">

<span class="span">Non-Vegetarian</span>

</li>

</ul>

--%>

</div>

-------------------------------------------