title: Adding toggle on a triple nested UL Elements
body: <p>The first nest of the UL seems to be working fine, but when I clicked on the second nest of UL the problem I encounter is it's closing the first nest. I want the second nest of UL to show. To be exact I want to show the child element of My Job Listings.</p>
  
  <pre><code>&lt;ul id="hb_sidebarmenu"&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;&lt;i class="fa fa-home" aria-hidden="true"&gt;&lt;/i&gt;Dashboard&lt;i class="fa fa-angle-down" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;ul class="submenu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;View Profile&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;Edit Profile&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;Account Settings&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;&lt;i class="fa fa-users" aria-hidden="true"&gt;&lt;/i&gt;My Clients&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;&lt;i class="fa fa-clock-o" aria-hidden="true"&gt;&lt;/i&gt;Pending Applications&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;&lt;i class="fa fa-envelope" aria-hidden="true"&gt;&lt;/i&gt;Messages&lt;i class="fa fa-angle-down" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;ul class="submenu"&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;My Job Listings&lt;i class="fa fa-angle-down" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;ul class="submenu_1"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;Web Developer&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;Content Writer&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;Inbox&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;Sent Items&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;div class="hb_menu_name"&gt;&lt;i class="fa fa-university" aria-hidden="true"&gt;&lt;/i&gt;Headquarters&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>jQuery(document).ready(function($){
      $("#hb_sidebarmenu li ul").hide();
      $("#hb_sidebarmenu li").click(function(){
          $(this).find('.submenu').toggle();
      });
  });
  </code></pre>