jQuery - problems with show/hide/click function

Question

I do not know how well i remaked this code, but the biggest problem is this:

when i am clicked on menu item, than black box are showing. When i clicked in white space/background or somewhere else, than box disappeared. It is logical to assume, that when i am clicking second menu item (when first menu item is actived), than first menu item (black box) should disappear, and second menu item should be activated. However, when i am clicking second menu item, both black boxes is activated.

$(document).ready(function () {
$('#icons').click(function () {
        if ($('#chat-drop').is(":visible")) {
            $('#chat-drop').hide()
        $('#rodyti').removeClass('active');
        } else {
            $('#chat-drop').show()
        $('#rodyti').addClass('active');
        }
    return false;
});

Full code: http://jsfiddle.net/wW75v/4/

I would be grateful for any help

KingKongFrog · Accepted Answer · 2013-04-20 20:47:11Z

Add the following at the beginning of both click events, to clear any visible chat drop elements.

http://jsfiddle.net/wW75v/5/

$('#chat-drop,#chat-drop2').hide()

So this becomes:

$(document).ready(function () {
    $('#icons').click(function () {
        $('#chat-drop,#chat-drop2').hide(); //Add
        if ($('#chat-drop').is(":visible")) {
            $('#chat-drop').hide()
            $('#rodyti').removeClass('active');
        } else {
            $('#chat-drop').show()
            $('#rodyti').addClass('active');
        }
        return false;
    });


    $('#icons2').click(function () {
        $('#chat-drop,#chat-drop2').hide(); //Add
        if ($('#chat-drop2').is(":visible")) {
            $('#chat-drop2').hide()
            $('#rodyti2').removeClass('active');
        } else {
            $('#chat-drop2').show()
            $('#rodyti2').addClass('active');
        }
        return false;
    });



    $('#chat-drop').click(function (e) {
        e.stopPropagation();
    });
    $(document).click(function () {
        $('#chat-drop').hide();
        $('#rodyti').removeClass('active');
    });


    $('#chat-drop2').click(function (e) {
        e.stopPropagation();
    });
    $(document).click(function () {
        $('#chat-drop2').hide();
        $('#rodyti2').removeClass('active');
    });

});

Pavel · Accepted Answer · 2013-04-20 20:50:58Z

Try this :

$('#icons').click(function () {
    if ($('#chat-drop').is(":visible")) {
        $('#chat-drop').hide()
    $('#rodyti').removeClass('active');
    } else {
        $('#chat-drop').show()
    $('#rodyti').addClass('active');
        $('#chat-drop2').hide()
        $('#rodyti2').removeClass('active');
    }
return false;
});


$('#icons2').click(function () {
        if ($('#chat-drop2').is(":visible")) {
            $('#chat-drop2').hide()
        $('#rodyti2').removeClass('active');
        } else {
            $('#chat-drop2').show()
        $('#rodyti2').addClass('active');
                        $('#chat-drop').hide()
        $('#rodyti').removeClass('active');
        }
    return false;
});

Collectives™ on Stack Overflow

jQuery - problems with show/hide/click function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related