jQuery hide input with two events - on click and blur?

Question

I'm trying to get an input field to show and hide via css transitions. I have the css and html portion figured out. I'd like the input to toggle show/hide when a div is clicked. I would also like it to hide if the input loses focus (blur).

I have it almost working except when clicking the div a second time. Blur fires before the click event. So, the blur event removes the class but the click event re-applies the class. I believe the standard order is blur is first. So, it is essentially working as expected, just not what is desired.

The states that work.

1. Click div and input reveals applying focus so the user can start typing.
2. Click outside of input and the input hides removing focus.

The state that doesn't work

1. Click the div a second time to hide the input. The blur event fires since you are clicking outside the input. And, the click event re-applies the class. So, it starts to hide, but then reveals itself.

I'm sure there is a way to achieve this. My brain is mush at the moment. Any help is appreciated.

$('.clickme').on({
        click: function() {

            $('.wrapper').toggleClass("left");
            if ( $(".wrapper").hasClass("reveal") ) {
                $('.large input').focus();
            }

        }

    });
    $('.large input').on({ blur: function() {
            $('.wrapper').removeClass("reveal");

        }

    });

Answer 1

If blur fires before click, you can prevent event bubbling with this in your blur handler:

event.stopPropagation()