Prettier way to write this script (Hide span on click, show input)

html, jquery

Solution

If the elements are siblings you can also pass an object to the `.on()` method:

$('body').on({
    click: function() {
       $(this).filter('span').hide().next().show();
    },
    blur: function() {
       this.value == '' && $(this).hide().prev().show();  
    }
}, 'span.note, .addnote');

http://jsfiddle.net/27kYh/

Problem

I have this code: ``` $('body').on('click', 'span.note', function (event) { $(this).hide(); $(".addnote").show(); }); $('body').on('focusout', '.addnote', function (event) { if ($(this).val() == "") { $(this).hide(); $("span.note").show(); } }); ``` And this is my HTML: ``` <span class="note">test</span> <input class="addnote" type="text" style="display:none;"> ``` What it does is: on click it hides the span and displays the input field and when leaving the input field empty and on `focusout` it returns the span. It works but I'm pretty sure there is a prettier way to write this. Can anyone assist me and point out what I could improve. Thanks. EDIT: Also, i noticed when clicking the text the Input shows but i have to click it again to be able to write, any way to fix so with 1 click it displays the field and the visitor can type in the field?

Original source