jQuery click to toggle

Question

I have this code in my script:

$(document).ready(function() {
    $('*').not('div#user').click(function() {
        $('div#userSettings').hide();
    });
    $('div#user').click(function() {
        $('div#userSettings').toggle();
        $('div#profileSettings').toggleClass('rotate');
    });
});

I need the div#userSettings to be hidden whenever anything but it's button or itself is clicked, and I want it to appear only when I click on the div#user.

the toggleclass does still work in this, just that the div#userSettings does not appear at all

Arun P Johny · Accepted Answer · 2014-03-15 14:39:36Z

3

You can stop the event propagation

$(document).ready(function () {
    $(document).click(function (e) {
        $('#userSettings').hide();
    })
    $('#user').click(function (e) {
        e.stopPropagation();
        $('#userSettings').toggle();
        $('#profileSettings').toggleClass('rotate');
    });
    $('#userSettings').click(function (e) {
        e.stopPropagation();
    });
});

Demo: Fiddle

answered Mar 15, 2014 at 14:39

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dino Prašo Over a year ago

Jep... That worked.. Thank you very much. I will mark this as answer as soon as it lets me :D

Collectives™ on Stack Overflow

jQuery click to toggle

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related