Search code examples
jqueryif-statementstoppropagation

jQuery if and else statement troubles

I have used the following code to get "click outside" to close working:

Here is the jsfiddle of the entire code (please enable jQuery on the left navigation for it to work):

http://jsfiddle.net/jhacks/ZxBXe/17/

On click the divs show:

$('div.topIconNew').click(
    function(){
        $(this).siblings('div.topTip').show();
        $(this).siblings('div.topDrop').slideDown(240);

On click outside the divs hide: 

$(document).click(
    function(event){
        $('div.topTip, div.topDrop').hide();
    }
);
$('div.topTip, div.topDrop').click(
    function(event){
        event.stopPropagation();
    }
);

The problem with that above is that if I add topIconNew .stopPropagation, then once the topTip and topDrop divs are open, they won't close if I click that same topIconNew again (i.e. toggle) or another instance of topIconNew.

My attempted solution is the following:

if($('div.topTip, div.topDrop').is(':visible')){
        $('div.topIconNew').click(
            function(){
                 // need to specify only divs currently open to hide
                $('div.topTip, div.topDrop').hide();
            }
        )
    }
    else {
        $('div.topIconNew').click(
            function(event){
                event.stopPropagation();    
            }
        );
    }

I want the above to say to hide topTip and topDrop upon clicking topIconNew only if the topTip and topDrop are visible AND only hide the topTip and topDiv elements that are currently open. Additionally, if nothing is open (else statement), I want the topIconNew to stopPropagation... so that the div#wrapper.hide() doesn't conflict with the topIconNew.show().

Currently, the else statement is working, as without it the topIconNew .show and .hide conflict with one another and they don't work. But now they do...

However, the if statement is not working as the topTip and topDrop don't close when they are open and I click topIconNew. Additionally, I know at least one problem I have is that I have not specified to close the topTip and topDrop that are currently open (right now I'm just telling it to close any of them).

Any and all help is greatly appreciate here. Thanks!!!

Solution

  • Well, there's a problem in that you are never assigning the 'hide' code to the topIconNew.

    Is this a little closer to what you wanted?

    http://jsfiddle.net/ZxBXe/20/