title: jQuery: menus appear/disappear on click - V2
body: <p>V1 of this question can be found here: <a href="https://stackoverflow.com/questions/4189042/jquery-menus-appear-disappear-on-click">jQuery: menus appear/disappear on click</a></p>
  
  <p>The difference with the first question is my HTML structure. Once I started implementing the megamenus with CSS, things weren't displaying the way I needed them to.</p>
  
  <p><strong>Here's the basic HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;
   &lt;li&gt;&lt;span&gt;Products &amp;amp; Services (1)&lt;/span&gt;&lt;/li&gt;
   &lt;li&gt;&lt;span&gt;Support &amp;amp; Training (2)&lt;/span&gt;&lt;/li&gt;
   &lt;li&gt;&lt;span&gt;Communities (3)&lt;/span&gt;&lt;/li&gt;
   &lt;li&gt;&lt;span&gt;Store (4)&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="megamenu"&gt;1111&lt;/div&gt;
  &lt;div class="megamenu"&gt;2222&lt;/div&gt;
  &lt;div class="megamenu"&gt;3333&lt;/div&gt;
  &lt;div class="megamenu"&gt;4444&lt;/div&gt; 
  </code></pre>
  
  <p><strong>As with the first menu, this is what I need:</strong></p>
  
  <p>I need a way to have each link activate its own megamenu, and each megamenu should close when:</p>
  
  <ol>
  <li>The user clicks on <strong>another</strong> item in the nav bar.</li>
  <li>The user clicks on the <strong>same</strong> item in the nav bar.</li>
  <li>The user clicks on a 'close button' (X) graphic inside the megamenu (not shown in the HTML for simplicity sake).</li>
  </ol>
  
  <p>I know this is very similar to how Tabs work, the difference is that each tab container can be closed/collapsed. Does that make sense?</p>
  
  <p>Again, I'm not a jQuery/JS person (you can see that), so any help would be extremely appreciated.</p>
  
  <p>Thanks,</p>