jQuery: menus appear/disappear on click - V2

Question

V1 of this question can be found here: jQuery: menus appear/disappear on click

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.

Here's the basic HTML:

<ul>
 <li><span>Products &amp; Services (1)</span></li>
 <li><span>Support &amp; Training (2)</span></li>
 <li><span>Communities (3)</span></li>
 <li><span>Store (4)</span></li>
</ul>
<div class="megamenu">1111</div>
<div class="megamenu">2222</div>
<div class="megamenu">3333</div>
<div class="megamenu">4444</div> 

As with the first menu, this is what I need:

I need a way to have each link activate its own megamenu, and each megamenu should close when:

1. The user clicks on another item in the nav bar.
2. The user clicks on the same item in the nav bar.
3. The user clicks on a 'close button' (X) graphic inside the megamenu (not shown in the HTML for simplicity sake).

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?

Again, I'm not a jQuery/JS person (you can see that), so any help would be extremely appreciated.

Thanks,

Answer 1

It should be fairly simple to adapt your earlier accepted answer as necessary. You still have the spans (although I don't see a top-nav ID).

You need to look into the .click handler. You also need to figure out how you are associating the divs containing your megamenu with each span that you want to trigger it. Unique IDs may work.

Answer 2

I'd use CSS diplay property + id attribute, like this:

<script>
    current = "m0"; // div with id="m0" is currently diplayed
    function show_or_hide ( id )
    {
        if ( current ) //if something is displayed
        {   
            document.getElementById ( current ).style.display = "none";
            if ( current == id ) //if <div> is already diplayed
            {                           
                current = 0;
            }
            else
            {
                document.getElementById ( id ).style.display = "block";
                current = id;
            }
        }
        else //if nothing is displayed
        {
            document.getElementById ( id ).style.display = "block";
            current = id;
        }
    }
</script>

<ul>
 <li onclick="show_or_hide('m0')"><span>Products &amp; Services (1)</span></li>
 <li onclick="show_or_hide('m1')"><span>Support &amp; Training (2)</span></li>
 <li onclick="show_or_hide('m2')"><span>Communities (3)</span></li>
 <li onclick="show_or_hide('m3')"><span>Store (4)</span></li>
</ul>
<div class="megamenu" id="m0">1111</div>
<div class="megamenu" id="m1" style="display: none">2222</div>
<div class="megamenu" id="m2" style="display: none">3333</div>
<div class="megamenu" id="m3" style="display: none">4444</div>

Answer 3

Here's the answer to this, I couldn't find a way to use the HTML structure I mentioned above:

HTML

<div id="megamenus" class="click-menu">
 <h6>Link 1</h6>
 <div>Content...</div>
 <h6>Link 2</h6>
 <div>Content...</div>
 <h6>Link 3</h6>
 <div>Content...</div>
</div>

jQuery

$(function(){
//Megamenus 
$('.click-menu div').hide();
$('.click-menu h6').click(function(){
    if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
    $(this).parent().next().slideUp('fast');
  } else {
    $('.click-menu h6').removeClass('selected');
    $(this).addClass('selected');
    $('.click-menu div').slideUp('fast');
    $(this).parent().next().slideDown('fast');
    }   
  });
});