Как добавить и убрать класс к блоку

[Vladislav]

Здравствуйте, у меня на сайте есть textarea (однострочный, то есть в высоту он 15 пиксилей, при том что высота шрифта 12 пикселей).

Появилась интересная идея, чтобы при клике на него он увеличивался в высоту скажем до 3-ех строчек (45 пикселей). Это я смог реализовать:

$(document).ready(function() {
    $('.comment').click(function() {
        $(this).css('height', '45px');
        return false;
    }); 
});

Но вот, как сделать так чтобы когда с этого блока убирали курсор все возвращалось на место, то есть чтобы textarea из 45px возвращался в 15px?

И еще один вопрос: можно ли сделать чтобы все это работало не только при клике, а еще и при фокусе (то есть если например в этот textarea юзер "проберется" через tab, то нечего не будет работать...

Надеюсь на помощь, спасибо!

[danik.js]

чтобы все это работало не только при клике, а еще и при фокусе

Не "еще", а этого и достаточно будет:

<textarea class="comment" style="height:15px"></textarea>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {
        $('.comment').focus(function() {
            $(this).stop().animate({height: 45});
        }).blur(function() {
            $(this).stop().animate({height: 15});
        });
    });
</script>

[Vladislav]

Все работает отлично, до того как я нажму на кнопку отправить.
После этого сообщение появляется с помощью ajax'a и получается.

Раньше мне говорили как-то через ".on" работать, но я не могу в него врубиться поможете?

[danik.js]

А?

[Vladislav]

Сорри не до конца отправил сообщение)

Тяжело будет объяснить, но суть такая что все работает отлично, до того как я нажму кнопку "отправить", после этого обновляется ajaxom эта область включая этот же textarea и он уже не увеличивается при фокусе, то есть js код перестает работать..

Если до сих пор не поняли меня, можете протестировать сами:

Сайт: http://socnet.bget.ru

для входа:

маёл: 1ilopatin96@mail.ru
пароль: 111111

Вот картинка где тестировать: