title: jQuery click menu
body: <p>I'm working on this menu:</p>
  
  <p><img src="https://i.stack.imgur.com/BtbIo.png" alt="enter image description here"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;!-- end #menu --&gt;
  
  &lt;ul class="submenu submenu-1"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1.1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1.2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1.3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1.4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;!-- end #submenu.submenu-item1 --&gt;
  &lt;ul class="submenu submenu-2"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1.1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1.2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1.3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1.4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;!-- end #submenu.submenu-item1 --&gt;
  
  &lt;div class="hero hero-1"&gt;content&lt;/div&gt;
  &lt;div class="hero hero-2"&gt;content&lt;/div&gt;
  &lt;div class="hero hero-3"&gt;content&lt;/div&gt;
  &lt;div class="hero hero-4"&gt;content&lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('#menu li a').click(function () {
      $('#menu li').removeClass('active');
      $('.submenu, .hero').slideDown('normal');
  });
  $('.submenu, .hero').hide();
  </code></pre>
  
  <p>... it currently shows ALL submenus and hero divs. What I want is.. if its FIRST li of the #menu, it should look for submenu-1 and hero-1 and slidedown.</p>
  
  <p>I'd really appreciate any help.</p>
  
  <p>Thanks!</p>