Javascript-форум - Показать/скрыть блок при клике на jQuery

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Показать/скрыть блок при клике на jQuery (https://javascript.ru/forum/jquery/69545-pokazat-skryt-blok-pri-klike-na-jquery.html)

Показать/скрыть блок при клике на jQuery

Добрый день! Пробую сделать штуку на 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>

vov555vov,
fadeIn заменить на fadeToggle и выкинуть строки 15-17

Цитата:

Сообщение от рони (Сообщение 457217)

vov555vov,
fadeIn заменить на fadeToggle и выкинуть строки 15-17

Проблема не исчезла. Прозрачность блока сначала уменьшается от 1 до 0, а затем увеличивается до 1

Цитата:

Сообщение от vov555vov

Проблема не исчезла.

если тут проблем нет, смотрите что у вас не так, как здесь.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .form-zayavka {
    background-color: #6FA68C;
    border:3px solid #A61D82;
    display:none;
  }
  .pokaz-skryt-form {
    cursor: pointer;
    background-color: #5DA64E;
  }
  .pokaz-skryt-form:hover {
    color:#A61719;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script>
$(function() {
   $('.pokaz-skryt-form').click(function(){
      $('.form-zayavka').stop().fadeToggle();
    });
});
  </script>
</head>

<body>
<div class="pokaz-skryt-form">
  <p>Показать/скрыть форму заявки</p>
</div>

<div class="form-zayavka" >
  <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>