Добрый день! Пробую сделать штуку на jQuery, чтобы при щелчке мыши по надписи "Показать/скрыть форму заявки" появлялся блок с формой, а при повторном щелчке по надписи этот блок "прятался". Написал код, но проблема в том, что при щелчке мыши блок с формой появляется и потом сразу исчезает. В чем моя ошибка?
<!DOCTYPE html>
<html>
<head>
<title>Показать/скрыть форму</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
[JS]<script type="text/javascript">
$('document').ready(function(){
$('.pokaz-skryt-form').click(function(){
$('.form-zayavka').fadeIn();
});
$('.pokaz-skryt-form').click(function(){
$('.form-zayavka').fadeOut();
});
});
</script>[/JS]
<style type="text/css">
.form-zayavka {
background-color: #6FA68C;
border:3px solid #A61D82;
}
.pokaz-skryt-form {
cursor: pointer;
background-color: #5DA64E;
}
.pokaz-skryt-form:hover {
color:#A61719;
}
</style>
<div class="pokaz-skryt-form">
<p>Показать/скрыть форму заявки</p>
</div>
<div class="form-zayavka" style="display:none;">
<form action="#" method="POST" name="zayavka" class="zayavka">
Введите ваше имя:
<p>
<input type="text" name="name" class="name-form">
</p>
<p>
Ваш телефон:
</p>
<p>
<input type="text" name="phone" class="phone-form">
</p>
<p>
<input type="submit" name="submit-otpravit" value="Отправить" class="submit-otpravka">
</p>
</form>
</div>
</body>
</html>