Show original element after clicking outside of the secondary element

Question

I want hide secondary image when user clicks anywhere else like somewhere in the page so if you look at the jfiddle, black box should become red again after user clicks outside of the black box.

I got the hiding code from this source: Use jQuery to hide a DIV when the user clicks outside of it.

Thanks

HTML:

<img id="language_arrow_bottom" src="http://placehold.it/32/ff0000" width="13px" height="13px" alt="" />
<img id="language_arrow_up" src="http://placehold.it/32/000000" width="13px" height="13px" alt="" style="display:none;" />

JS:

$(document).ready(function ()
{
    $('#language_arrow_bottom').click(function(event)
    {
        $('#language_arrow_bottom').hide();
        $('#language_arrow_up').show();
    });

    $('#language_arrow_up').click(function(event)
    {
        $('#language_arrow_up').hide();
        $('#language_arrow_bottom').show();
    });

    var container = $('#language_arrow_up');

    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.hide();
        $('#language_arrow_bottom').show();
    }
});

score 1 · Accepted Answer · answered Sep 11 '13 at 15:53

$(document).ready(function() {
    $('#language_arrow_bottom').click(function(event) {
        $('#language_arrow_bottom').hide();
        $('#language_arrow_up').show();
        event.stopPropagation();
    });
    $(document).click(function(event) {
        $('#language_arrow_up').hide();
        $('#language_arrow_bottom').show();
    });
});

http://jsfiddle.net/5sjvj/2/

score 0 · Answer 2 · answered Sep 11 '13 at 15:52

You have to put the code on mouseup event on the document. The way you were doing it, the code used to execute when the page got loaded and used to throw an error for undefined variable e.

All I did was put the same code you had inside $(document).mouseup(function (e) { ... } and it worked. Now, whenever you click mouse and leave it i.e. the mouse button comes up, this method will be called.

 $(document).mouseup(function (e) {
        var container = $('#language_arrow_up');

        if (!container.is(e.target) && container.has(e.target).length === 0) {
            container.hide();
            $('#language_arrow_bottom').show();
        }
    });

See working example.

score 0 · Answer 3 · answered Sep 11 '13 at 15:53

You need to handle the click on something that's above the two elements you're toggling, otherwise you won't catch it.

$(document).ready(function ()
{
    $(document).click(function(e) {
        console.log(e.target);

        if(e.target === $("#language_arrow_bottom")[0]) {
            $("#language_arrow_up").show();
            $("#language_arrow_bottom").hide();
        } else if(e.target !== $("#language_arrow_up")[0]) {
            $("#language_arrow_up").hide();
            $("#language_arrow_bottom").show();
        }
    });
});

See fiddle here.

score 0 · Answer 4 · answered Sep 11 '13 at 16:06

another way!

html:

<div class="arrow"></div>

css:

.arrow {
    background-image: url('http://placehold.it/32/ff0000');
    height: 13px;
    width: 13px;
}
.arrow.down {
    background-image: url('http://placehold.it/32/000000');
}

js:

$(document).ready(function () {
    var $arrow = $('.arrow');

    $arrow.on('click', function (e) {
        e.stopPropagation();

        $arrow.toggleClass('down');

        if ($arrow.hasClass('down')) {
            //down
        } else {
            //up
        }
    });

    $(document).on('click', function () {
        $arrow.removeClass('down');
    });
});

http://jsfiddle.net/5sjvj/8/

Show original element after clicking outside of the secondary element

4 Answers4