jQuery .toggle woes

Question

My 1st question on here so I'll try to be as concise as possible.

I have a series of nav elements, some of which have nav sub-elements. My basic structure is:

    <nav role="navigation" class="primary-nav main-nav">
        <ul>
            <li><a href="index.php">home</a></li>
            <li class="about-item"><a href="#">about</a></li>
            <li class="study-item"><a href="#">study</a></li>
            <li class="apply-item"><a href="#">apply</a></li>
            <li><a href="people.php">people</a></li>
            <li><a href="shows.php">shows</a></li>
            <li><a href="contact.php">contact</a></li>
        </ul>
    </nav>

    <!-- secondary navs -->
    <!-- about -->
    <nav role="navigation" class="sec-nav sec-nav-about">
        <ul>
            <li><a href="history.php">history</a></li>
            <li><a href="facility.php">facility</a></li>
            <li><a href="alumni.php">alumni</a></li>
            <li><a href="friends.php">friends</a></li>
            <li><a href="patrons.php">patrons</a></li>
            <li><a href="singers.php">singers</a></li>
        </ul>
    </nav>

    <!-- study -->
    <nav role="navigation" class="sec-nav sec-nav-study">
        <ul>
            <li><a href="foundation.php">foundation</a></li>
            <li class="study-undergrad-item"><a href="#">undergrad</a></li>
            <li class="study-postgrad-item"><a href="#">postgrad</a></li>
            <li><a href="parttime.php">part time</a></li>
            <li><a href="exams.php">exams</a></li>
            <li><a href="saturdayschool.php">saturday school</a></li>
            <li><a href="sundayschool.php">sunday school</a></li>
            <li><a href="summerschool.php">summer school</a></li>
        </ul>
    </nav>
<!-- apply -->
<nav role="navigation" class="sec-nav sec-nav-apply">
    <ul>
        <li><a href="loans.php">loans</a></li>
        <li><a href="auditions.php">auditions</a></li>
        <li><a href="fees.php">fees</a></li>
        <li><a href="exams.php">exams</a></li>
        <li><a href="saturdayschool.php">saturday school</a></li>
        <li><a href="sundayschool.php">sunday school</a></li>
        <li><a href="summerschool.php">summer school</a></li>
    </ul>
</nav>

(I know these lists could - and should - be nested but this is code I've inherited rather than written myself and I don't want to screw with anything else that might be in the styles).

So - what I want is when the 3rd, 4th and 5th main-nav items are clicked, their corresponding submenu animates using margin-left.

I'm currently using jQuery .toggle() to try and achieve this effect. Here is my jQuery:

$(document).ready(function(){
  $('.main-nav .about-item a').toggle (
    function(){
      $('.sec-nav-about').animate({marginLeft: "480"}, 500);
    },
    function(){
      $('.sec-nav-about').animate({marginLeft: "-250"}, 500);
    });

  $('.main-nav .study-item a').toggle (
    function(){
      $('.sec-nav-study').animate({marginLeft: "480"}, 500);
    },
    function(){
      $('.sec-nav-study').animate({marginLeft: "-250"}, 500);
    });
  $('.main-nav .apply-item a').toggle (
    function(){
      $('.sec-nav-apply').animate({marginLeft: "480"}, 500);
    },
    function(){
      $('.sec-nav-apply').animate({marginLeft: "-250"}, 500);
    });
  });

Up to this point, its fine. However, I cannot get beyond this point. I have no idea how to re-work the code to achieve the following:

1) When each main menu item is clicked, if it has a sub-menu and if its not already showing, then the sub-menu animates out (this is working fine).

2) If a sub-menu is already showing, then when its main menu item is clicked then the sub menu animates back in until its not showing (this is also working).

3) If a sub menu is showing and another sub menu item is clicked, the first sub-menu animates back in until its not showing and the new sub-menu animates out. This not working.

I have attempted to add/remove an .active class to each sub-menu like so (just one here for illustrative purposes but all three sub-menus have this applied to them):

$('.main-nav .about-item a').toggle (
  function(){
    $('.active').animate({marginLeft: "-250"}, 500).removeClass('active');
    $('.sec-nav-about').animate({marginLeft: "480"}, 500).addClass('active');
  },
  function(){
    $('.sec-nav-about').animate({marginLeft: "-250"}, 500).removeClass('active');
  });
});

Then what happens is that, it seems to work and then after awhile, it stops removing/adding the .active class. I double checked in Chrome's Element Inspector and can see it (not) happening. I need to click the links twice to get the toggle() to work and drive the animation.

Any ideas/suggestions/solutions would be very gratefully appreciated.

(edited for spelling errors).

Thanks,

Answer 1

Will Moore's answer explains why your current method doesn't work. The following should fix your problem. Using the regex on the className property means that we can apply this to all items in your list without having to set each one up individually.

Also, note that we query the 'sub menus to hide' before adding the .active class to the currently selected sub-menu; this avoids hiding it as soon as we show it.

$('.main-nav li').click(function() {
    var itemType = this.className.match(/(^| )([^ ]+)-item( |$)/);
    if(itemType != null) {
        itemType = itemType[2];
    }

    $secNavItem = $('.sec-nav-' + itemType);
    $subMenusToHide = $('.active');
    if(!$secNavItem.hasClass('active')) {
        $secNavItem
            .addClass('active')
            .animate({marginLeft: "480"}, 500);
    }

    $subMenusToHide
        .animate({marginLeft: "-250"}, 500)
        .removeClass('active');
});

You can see it working in this fiddle: http://jsfiddle.net/ET475/23/

Answer 2

When you click 'Study' it SHOWS the study submenu. Then you click the 'About' and it HIDES the study menu (shows the about menu). Now you click 'Study' again. This is only the second click on the study button, so it's going to do the opposite of the last time you clicked it: ie it's going to HIDE the study submenu when you want it to show the study menu.

This works for me:

$('.main-nav .about-item a').click (function(){
    var $submenu = $('.sec-nav-about');
    // if the submenu you want isn't showing...
    if (!$submenu.hasClass('active')) {
        // if any other submenu is showing, hide it...
        if ($('.active').length > 0){
            $('.active').animate({marginLeft: "-250"}, 500, function(){
             // ...show submenu AFTER previous submenu is hidden
             $submenu.animate({marginLeft: "480"}, 500).addClass('active');
            }).removeClass('active');
        } else {
            // no submenus showing: simply display
            $submenu.animate({marginLeft: "480"}, 500).addClass('active');
        }
    }
});