CODEWITHSUNDEEP
jquery
Matty82
Matty82

Reputation: 67

jQuery: I need a custom hide() for toggling menu

I have a simple menu/submenu with jquery click() function and toggle(). My problem is, toggle() is working fine, but when for e.g. #submenu1 is open, and I click on "Menu 2", #submenu1 remains visible of course, and both submenus overlap. So I need a hide() for the submenus, but I don't get it work! I tried not(), siblings() with no success. Any help is appreciated! Thanks in advance.

jQuery:

$('#menu li').click(function() {
$('div', this).stop(true, true).animate({ 'height': 'toggle' }, 300);
 });

HTML:

<ul id="menu">
   <li><a href="#">Menu 1</a>
       <div id="submenu1">
           <ul>
              <li>Submenu 1</li>
           </ul>
       </div>
   </li>
   <li><a href="#">Menu 2</a>
       <div id="submenu2">
           <ul>
              <li>Submenu 2</li>
           </ul>
       </div>
   </li>
</ul>

CSS:

#submenu1, #submenu2 {
z-index: 99;
position: absolute;
background: #6fb700;
display: none;
}

Upvotes: 3

Views: 188

Answers (4)

Anujith
Anujith

Reputation: 9370

Try: http://jsfiddle.net/D9pq8/

$('#menu li').click(function () {
   $(this).siblings().children('div').hide();
   $('div', this).stop(true, true).animate({ 'height': 'toggle' }, 300);
});

Upvotes: 1

Silagy
Silagy

Reputation: 3083

Try this

Edit To shorten version

$("#menu li").click(function() {
    if($('div' , this).css('display') != 'block')
            $("#menu li div.active").hide().removeClass('active');

      $('div', this).addClass('active').stop(true, true).animate({ 'height': 'toggle' }, 300);  
});

Fiddle Example

This is your fiddel example

Upvotes: 0

DeweyOx
DeweyOx

Reputation: 719

Extending on what @silagy posted:

 $('#menu li').click(function() {
     $("#menu li div.active").hide().removeClass('active');
    $('div', this).addClass('active').stop(true, true).animate({ 'height': 'toggle' }, 300);
});

This simply adds an 'active' class so there is no double animating a menu item.

Upvotes: 0

Nemeth
Nemeth

Reputation: 166

Try to do this with jquery tabs. Main menus in vertucal mode and submenus in default mode EX: Tabs UI

Upvotes: 0

Related Questions