One dropdown at a time - setting a flag

Question

If you click the dropdowns at this site: http://ryanbent.com/ - I want each of those tabs to only OPEN one at a time. If you click one, then close the other.

I understand the thought behind it, i sent a class when you click it, and I am trying to go through each of them, but I cant seem to get it to work. I think its my selectors. My code is below:

function HideMenu(){
 //$('.open').stop().animate({'top':'-480px'},500,"linear");
 $('.open').slideUp();
 $(this).removeClass("open");
 $("#fuzz").fadeOut();
}
function checkMenu(){ $('.open').slideUp(); }
 $('#contact').toggle(function() {
 checkMenu();
 $('#contact-pull').show().animate({'top':'-50px'}).addClass("open");
 //$('#contact-pull').slideDown();
}, function() {
 HideMenu();
 $('#contact-pull').animate({'top':'-180px'})
});     
$('#about').toggle(function() {
 checkMenu();         
 $('#about-pull').show().animate({'top':'55px'}).addClass("open");                
 // $('#about-pull').slideDown();
}, function() {
 HideMenu();
 $('#about-pull').animate({'top':'-465px'})
});     
$('#portfolio').toggle(function(){
 checkMenu();
 $('#portfolio-pull').animate({'top':'75px'}).addClass("open");
}, function() {
 HideMenu();
 $('#portfolio-pull').animate({'top':'-150px'});
});

Does anyone have any suggestions on how I can get this working? I have been struggling with this and cant seem to get it to work. I set the flag fine, but I need to check for it.

Thanks,

Ryan

Answer 1

You could take a cleaner approach where you wouldn't have to init each menu item individually but to just edit your existing code you could try something like this:

    function HideMenu(){
            $('.open').stop().animate({'top':'-180px'},500,"linear",function(){
                    $(this).removeClass("open");
                    $(this).hide();
            });
    }

    $('#contact').toggle(function() {
            $('#contact-pull').show().animate({'top':'-50px'}).addClass("open");
    }, function() {
            HideMenu();
            $('#contact-pull').animate({'top':'-180px'})
            $("#fuzz").fadeOut();
    });     
    $('#about').toggle(function() {
            var h = $('#about-pull').height();
            var new_t = h-380;
            $('#about-pull').show().animate({'top':new_t}).addClass("open");                
    }, function() {
            HideMenu();
            $('#about-pull').animate({'top':'-350px'})
            $("#fuzz").fadeOut();
    });     
    $('#portfolio').toggle(function() {
            var h = $('#portfolio-pull').height();
            var new_t = h-70;
            $('#portfolio-pull').animate({'top':new_t}).addClass("open");
    }, function() {
            HideMenu();
            $('#portfolio-pull').animate({'top':'-150px'})
            $("#fuzz").fadeOut();
    });

The changes I made were:

• You don't need to call "HideMenu" in an each loop the function can just find the relevant (open) menu and close it.
• You seemed to be using both "open" and "openMenu" as class names in your code, I changed it to just use "open".
• You weren't calling the HideMenu function in the handler for #about as there was no () after it.
• You weren't even trying to call the HideMenu function in the handler for #portfolio

Hope it helps - I didn't test it, just corrected the errors that jumped out at me :)