How can I refactor this jQuery code?

Question

The code below is for a simple newsletter signup widget.

I'm sure there's a way to make it more concise, any ideas?

var email_form = $('.widget_subscribe form'); 
var email_submit = $('.widget_subscribe .submit');
var email_link = $('.widget_subscribe .email');

// Hide the email entry form when the page loads
email_form.hide();

// Show the form when the email link is clicked
$(email_link).click( function () {
    $(this).toggle();
    $(email_form).toggle();
    return false;
});

// Hide the form when the form submit is clicked
$(email_submit).click( function () {
    $(email_link).toggle();
    $(email_form).toggle();
});

// Clear/reset the email input on focus 
$('input[name="email"]').focus( function () {
    $(this).val("");
    }).blur( function () {
        if ($(this).val() == "") {
            $(this).val($(this)[0].defaultValue);
        }
});

Answer 1

You have some similar code here.

// Show the form when the email link is clicked
$(email_link).click( function () {
        $(this).toggle();
        $(email_form).toggle();
        return false;
});

// Hide the form when the form submit is clicked
$(email_submit).click( function () {
        $(email_link).toggle();
        $(email_form).toggle();
});

It could be refactored so the similarity is obvious.

// Show the form when the email link is clicked
$(email_link).click( function () {
        $(email_link).toggle();
        $(email_form).toggle();
        return false;
});

// Hide the form when the form submit is clicked
$(email_submit).click( function () {
        $(email_link).toggle();
        $(email_form).toggle();
});

So you could wrap toggling the link and the form into a function.

var toggleEmailLinkAndForm = function () {
        $(email_link).toggle();
        $(email_form).toggle();
}   

$(email_link).click(toggleEmailLinkAndForm);
$(email_submit).click(toggleEmailLinkAndForm);

And as others have pointed out, you can drop the redunant $()s.

var toggleEmailLinkAndForm = function () {
        email_link.toggle();
        email_form.toggle();
}   

email_link.click(toggleEmailLinkAndForm);
email_submit.click(toggleEmailLinkAndForm);

Answer 2

It's already pretty concise, there's not much more you can do.

Anywhere you have $(email_submit) you can just have email_submit, because you've already wrapped it in $() (which makes it a jquery object).

Eg:

email_submit.click( function () {
    email_link.toggle();
    email_form.toggle();
});