Убрать форму при нажатии на тексте
 

Здравствуйте.С jQuery практически не знаком но нужно сделать следующее:
....
<span class="form_zagol"><span class="hide_form">Скрыть форму</span><span class="add_com" style="display:none;> Добавить комментарии</span></span>

<div id="form">

<p></p>
<form action="" method="">

<span class="av"><br>Автор:</span> <input type="text" size="30" name="avtor"/>

<input type="checkbox" class="chek"/> <span class="anon">Ответить анонимно</span>

<p class="av">Сообщение:
<br><textarea name="message" cols="80" rows="8"></textarea></p>

<button type="submit" value="">Отправить</button>
<button type="reset" value="">Очистить</button>

</form>

</div>

Нужно что б пры загрузке страницы форма была видна, а при нажатии на "Скрыть форму" взамен етим словам появлялся текст "Добавить комментарии" и исчезала форма.

Немножко експерементировал но никак не получалось убрать или один или другой текст, полностю убирал при повторном нажатии.
Вот код етих експериментов:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){

$(".form_zagol").click(function(){
$(this).next("#form").slideToggle()
$(".add_com").show();
return false;
});

});


$(document).ready(function(){
$(".hide_form").click(function(){
$(".add_com").slideToggle();

});
});

$(document).ready(function(){
$(".add_com").click(function(){
$(".hide_form").slideToggle();

});
});


</script>

Ето полный бред наверно, но делал методом "научного тыка" потому так и получилось, поскольку не знаком с jQuery. Подскажите как правильно написать ето :help:

PS.Если подобная тема уже существует - дайте пожалуйста ссилку либо в ЛС либо на почту, а тему удаляйте