title: Add a third level to dynamically accordion menu MVC 5
body: <p>I used the following code to create a dynamic menu. I found it at <a href="http://www.dotnetfox.com/articles/dynamic-accordion-menu-or-vertical-menu-using-jquery-in-Asp-Net-mvc-1123.aspx" rel="nofollow">http://www.dotnetfox.com/articles/dynamic-accordion-menu-or-vertical-menu-using-jquery-in-Asp-Net-mvc-1123.aspx</a></p>
  
  <p>My model</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  namespace Accordion_Menu_MVC.Models
  {
  public class MenuModel
  {
     public List&lt;MainMenu&gt; MainMenuModel { get; set; }
     public List&lt;SubMenu&gt; SubMenuModel { get; set; }
  }
  public class MainMenu
  {
     public int ID;
     public string MainMenuItem;
     public string MainMenuURL;
  }
  public class SubMenu
  {
     public int MainMenuID;
     public string SubMenuItem;
     public string SubMenuURL;
  }
  }
  </code></pre>
  
  <p>My controller</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using Accordion_Menu_MVC.Models;
  namespace Accordion_Menu_MVC.Controllers
  {
  public class HomeController : Controller
  {
     //
     // GET: /Home/
     public ActionResult Index()
     {
         MenuModel ObjMenuModel = new MenuModel();
         ObjMenuModel.MainMenuModel = new List&lt;MainMenu&gt;();
         ObjMenuModel.MainMenuModel = GetMainMenu();
         ObjMenuModel.SubMenuModel = new List&lt;SubMenu&gt;();
         ObjMenuModel.SubMenuModel = GetSubMenu();
         return View(ObjMenuModel);
     }
     public List&lt;MainMenu&gt; GetMainMenu()
     {
         List&lt;MainMenu&gt; ObjMainMenu = new List&lt;MainMenu&gt;();
         ObjMainMenu.Add(new MainMenu { ID = 1, MainMenuItem = "Mobile", MainMenuURL = "http://www.google.com" });
         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&lt;SubMenu&gt; GetSubMenu()
     {
         List&lt;SubMenu&gt; ObjSubMenu = new List&lt;SubMenu&gt;();
         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;
        }
        }
       }
  </code></pre>
  
  <p>My view</p>
  
  <pre><code>@model Accordion_Menu_MVC.Models.MenuModel  
  @{
  ViewBag.Title = "Dynamic Accordion Menu Using jQuery in ASP.NET MVC";
  }
  &lt;link href="Css/styles.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.min.js"      type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
     $("#accordian h3").click(function () {
         $("#accordian ul ul").slideUp();
         if (!$(this).next().is(":visible")) {
             $(this).next().slideDown();
         }
     });
  });
   &lt;/script&gt;
   @using (Html.BeginForm("Index", "Home"))
     {
   &lt;div id="accordian"&gt;
       &lt;ul&gt;
                &lt;li&gt;
                @{
    foreach (var MenuItem in Model.MainMenuModel)
    {
    var SubMenuItem = Model.SubMenuModel.Where(m =&gt; m.MainMenuID ==  MenuItem.ID);
  
        &lt;h3&gt;&lt;a href="@MenuItem.MainMenuURL"&gt; @MenuItem.MainMenuItem &lt;/a&gt;&lt;/h3&gt;
  
          if (SubMenuItem.Count() &gt; 0)
          {
               &lt;ul&gt;
                        @foreach (var SubItem in SubMenuItem)
                        {
                            &lt;li&gt;&lt;a h  href='@SubItem.SubMenuURL'&gt;@SubItem.SubMenuItem&lt;/a&gt;&lt;/li&gt;
                        }
               &lt;/ul&gt;
           }
  
        }
     }
       &lt;/ul&gt;
    &lt;/div&gt;   
     }
  </code></pre>
  
  <p>My css</p>
  
  <pre><code>&lt;style&gt;
   /*Basic reset*/
   * {margin: 0; padding: 0;}
   body {
       background: White;
       font-family: Nunito, arial, verdana;
   }
  #accordian {
       background: #004050;
       width: 250px;
       margin: 100px auto 0 auto;
       color: white;
       /*Some cool shadow and glow effect*/
       box-shadow:
                0 5px 15px 1px rgba(0, 0, 0, 0.6),
                0 0 200px 1px rgba(255, 255, 255, 0.5);
    }
  /*heading styles*/
  #accordian h3 {
       font-size: 12px;
       line-height: 34px;
       padding: 0 10px;
       cursor: pointer;
       /*fallback for browsers not supporting gradients*/
       background: #003040;
       background: linear-gradient(#003040, #002535);
    }
  /*heading hover effect*/
   #accordian h3:hover {
       text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
   }
    /*iconfont styles*/
    #accordian h3 a {
       color: white;
       text-decoration: none;
       font-size: 12px;
       line-height: 27px;    
       padding: 0 15px;
       /*transition for smooth hover animation*/
    }
   #accordian h3 a:hover {
   color:#E1E1E1;   
    }
  /*list items*/
   #accordian li {
       list-style-type: none;
    background:#4D6974;
   }
   /*links*/
      #accordian ul ul li a {
       color: white;
       text-decoration: none;
       font-size: 11px;
       line-height: 27px;
       display: block;
       padding: 0 15px;
       /*transition for smooth hover animation*/
       transition: all 0.15s;
        }
       /*hover effect on links*/
       #accordian ul ul li a:hover {
       background: #003545;
       border-left: 5px solid lightgreen;
       }
      /*Lets hide the non active LIs by default*/
       #accordian ul ul {
       display: none;
       }
       #accordian li.active ul {
        display: block;
       }
       &lt;/style&gt;
  </code></pre>
  
  <p>Can someone help me on how can I add a third level in this menu</p>