Question

I have a nav bar, what I need is that when you click on an link its corresponding DIV should slide down/up.

My problems are that all the DIVs are sliding down and when clicking on the same link all DIVs AND the nva items slide up.

How can I make this work right?

My HTML:

<div id="megamenus" class="click-menu">
  <h6><span>Products &amp; Services</span></h6>
  <h6><span>Support &amp; Training</span></h6>
  <h6><span>Communities</span></h6>
  <h6 class="new-window"><span>Store</span></h6>

  <div class="menu-container">aaaa</div>    
  <div class="menu-container" id="training-n-support">bbbb</div>
  <div class="menu-container">cccc</div>
</div>

My jQuery:

$('.click-menu div.menu-container').hide();
$('.click-menu h6 span').click(function() {
  if ($(this).hasClass('selected')) {
    $(this).removeClass('selected');
    $(this).parent().siblings().stop(true, true).slideUp('slow', function() {
        $('h4').css('z-index', '1');
    });

 } else {
    $('.click-menu h6 span').removeClass('selected');
    $(this).addClass('selected');
    $('.click-menu div.menu-container').slideUp('slow');
    $(this).parent().siblings().stop(true, true).slideDown('');
    $('h4').css('z-index', '0');
 }
});

Here’s the DEMO.

Any help would be greatly appreciated.

Thanks.

Answer 1

You are telling all siblings of the parent to slide, not qualifying it further like this .siblings('selector-for-intended-element')

See JsFiddle for my recommendation : http://jsfiddle.net/BGBaH/1/

I recommend you put the divs directly after the menu items, and just use .next()

UPDTE

If you don’t want to do that, here is a jsfiddle that more closely resembles what you originally asked for I believe

http://jsfiddle.net/BGBaH/2/

I just added id’s to your span menu items, and added matching classes to the corresponding divs. Then I qualified the .siblings() function with the proper class selector.