Question

Basically I have 2 buttons that when hovered show/hide 2 hidden unordered lists so I use .toggle() for these

What I would also like to do however is when i hover and then click the link the unordered list remains visible, then when i hover and click the other link the previous hidden list is hidden again and the new clicked list is shown? Just not managing to work out how this can be best achieved, at the moment when i hover and then click as soon as i hover off the list disappears.

Hope this makes sense, fiddle is here http://jsfiddle.net/kyllle/D5Lmp/5/

Thanks

Answer 1

EDITED: I see now, updating based on your comment.

Basically, you just have to walk through the set of possibilities:

1. Hover over something active
2. Hover over something not active
3. Click on something active
4. Click on something not active

It’s a logic problem more than anything, and here’s the code and the fiddle to solve it:

$('#menu > li > a').hover(function() {
    if(!$(this).is('.active')) {
        var anyActive = $('#menu > li > a.active');
        if (anyActive.length == 0) {
            $('ul.inner:visible').hide();
            $(this).next().show();
        }
    }
});

$('#menu > li > a').click(function(e) {
    if(!$(this).is('.active')) {
        var anyActive = $('#menu > li > a.active');
        if (anyActive.length > 0) {
            anyActive.next().hide();
            anyActive.removeClass('active');
        }
        $(this).addClass('active');
        $(this).next().show();
    }
    e.preventDefault();
});

Working fiddle: http://jsfiddle.net/D5Lmp/22/