CODEWITHSUNDEEP
javascriptjquerymenu
Ricardo Zea
Ricardo Zea

Reputation: 10282

Sliding menus all coming out at once

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.

Upvotes: 1

Views: 148

Answers (2)

Luca Filosofi
Luca Filosofi

Reputation: 31173

UPDATED

.menu-container { display:none }

$(function() {
    $('#megamenus h6').click(function(e) {
        e.preventDefault();
          $('#megamenus div').slideUp(500);
          $(this).next('div:not(:visible)').slideDown(500);
    });
});

    <div id="megamenus" class="click-menu">
        <h6><span>Products &amp; Services</span></h6>
        <div class="menu-container">dddd</div>
        <h6><span>Store</span></h6>
        <div class="menu-container">aaaa</div>
        <h6><span>Support &amp; Training</span></h6>
        <div class="menu-container">bbbb</div>
        <h6><span>Communities</span></h6>
        <div class="menu-container">cccc</div>
    </div>

Upvotes: 1

jondavidjohn
jondavidjohn

Reputation: 62402

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.

Upvotes: 1

Related Questions