Dynamic accordion menu or vertical menu using jQuery in ASP.Net

Hi,

Please refer below code.

HTML

<div>
    <link href="CSS/Style.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#accordian h3").click(function () {
                $("#accordian ul ul").slideUp();
                if (!$(this).next().is(":visible")) {
                    $(this).next().slideDown();
                }
            });
        });
    </script>
    <div id="accordian">
        <ul>
            <li>
                <asp:Repeater ID="rptMainMenu" runat="server" OnItemDataBound="BindSubMenu">
                    <ItemTemplate>
                        <asp:HiddenField ID="hfMenuId" Value='<%#Eval("ID") %>' runat="server" />
                        <h3>
                            <a href='<%#Eval("MainMenuURL") %>'>
                                <%#Eval("MainMenuItem")%>
                            </a>
                        </h3>
                        <ul>
                            <asp:Repeater ID="rptSubMenu" runat="server">
                                <ItemTemplate>
                                    <li><a href='<%#Eval("SubMenuURL") %>'>
                                        <%#Eval("SubMenuItem")%>
                                    </a></li>
                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>
                    </ItemTemplate>
                </asp:Repeater>
            </li>
        </ul>
    </div>
</div>

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        rptMainMenu.DataSource = GetMainMenu();
        rptMainMenu.DataBind();
    }
}

protected void BindSubMenu(object sender, RepeaterItemEventArgs e)
{
    Repeater subMenu = e.Item.FindControl("rptSubMenu") as Repeater;
    int menuId = Convert.ToInt32(((e.Item.FindControl("hfMenuId") as HiddenField).Value));
    var SubMenuItem = GetSubMenu().Where(m => m.MainMenuID == menuId);
    if (SubMenuItem.Count() > 0)
    {
        subMenu.DataSource = SubMenuItem;
        subMenu.DataBind();
    }
}

public List<MainMenu> GetMainMenu()
{
    List<MainMenu> ObjMainMenu = new List<MainMenu>();
    ObjMainMenu.Add(new MainMenu { ID = 1, MainMenuItem = "Mobile", MainMenuURL = "#" });
    ObjMainMenu.Add(new MainMenu { ID = 2, MainMenuItem = "Speaker", MainMenuURL = "#" });
    ObjMainMenu.Add(new MainMenu { ID = 3, MainMenuItem = "Watch", MainMenuURL = "#" });
    ObjMainMenu.Add(new MainMenu { ID = 4, MainMenuItem = "Clothes", MainMenuURL = "#" });
    return ObjMainMenu;
}

public List<SubMenu> GetSubMenu()
{
    List<SubMenu> ObjSubMenu = new List<SubMenu>();
    ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Apple", SubMenuURL = "#" });
    ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Samsung", SubMenuURL = "#" });
    ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Nokia", SubMenuURL = "#" });
    ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Motorola", SubMenuURL = "#" });
    return ObjSubMenu;
}

Screenshot