Почему не работает Jquery toggle?

Question

[Михаил Максимов]

Почему-то не работает скрытие, открытие pop-up окна.
HTML

<div class="pop-up_wrapper" id="toggle_pop_up">
		<div class="pop-up_window">
			<div class="pop-up_header">
				<button class="close_btn" id="toggle_btn">Вернуться назад</button><br>
				<div class="pop-up_text">
					<span class="offer_btn">Заказать</span>
					<span class="pop-up_title">Бесплатную консультацию</span>
					<span class="managers">Наши менеджеры перезвонят Вам в течение 5 минут</span>
				</div>	
			</div>
			<div class="pop-up_body">
				<form action="#" class="">
					<div class="imgform">
	        			<img src="img/pop-up_name.png" alt="Custom image">
						<input type="text" class="" name="lead_name" placeholder="Как Вас зовут?"required></br>
					</div>
					<div class="imgform">	
						<img src="img/pop-up_phone.png" alt="Custom image">
						<input type="tel" class="center_form_phone_lead form_input" name="phone" placeholder="Телефон" required></br>
					</div>
					<div class="imgform">	
						<img src="img/pop-up_email.png" alt="Custom image">
						<input type="email" class="center_form_email_lead form_input" name="email" placeholder="E-mail">
					</div>
					</br>
						<input type="submit" class="send_button">

				</form>
			</div>
		</div>
	</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/pop_up.js"></script>

CSS

.pop-up_wrapper {
	display: none;
	position: fixed;
	z-index: 25;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
}
.pop-up_window {
        background-color: #fefefe;
        margin: 10% auto; 
  	border: 1px solid #888;
  	width: 25%; 
}
.pop-up_header {
	width: 100%;
	height: 15%;
	background-color: #eee;
}
.close_btn {
	float: right;
	background-color: #c5c2c2;
	color: #000;
	border: none;
	padding: 2%; 
	font-family: 'Proxima Nova Rg';
	cursor: pointer;
	transition-duration: 0.6s;
}
.close_btn:hover {
	background-color: transparent;
}
.pop-up_text {
	width: 100%;
	height: 100%;
	display: flex;	
	justify-content: center;
	flex-direction: column;
	margin-left: 10%;
	color: #ff0808;
	font-family: 'Proxima Nova Rg';
}
.pop-up_title {
	margin-top: 7%;
	text-transform: uppercase;
	font-size: 50px;
	line-height: 100%;
	margin-bottom: 3%;
}
.managers {
	font-size: 1em;
	padding-bottom: 4em;
}
.offer_btn {
	font-size: 1.5em;
}
.pop-up_body {
	display: flex;
	justify-content: center;
}
.imgform {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 5%;
	margin-top: 5%;
}
.imgform img {
	margin-right: 10%;
}
.imgform input {
	width: 20em;
	height: 3em;
	font-size: 1em;
	padding-left: 1em;
}
.send_button {
	border: none;
	color: white;
	background-color: #ff0808;
	display: flex;
	justify-content: center;
	margin: auto;
	margin-bottom: 2em;
	width: 8em;
	height: 4em;
	font-family: 'Proxima Nova Rg';
	cursor: pointer;
	font-size: 1em;
	transition-duration: 0.4s;
}
.send_button:hover {
	background-color: #fb6767;
}

JQuery

$(document).ready(function() {
    $(function(){
	$("#toggle_btn").click(function(){
		$("#toggle_pop-up").toggle("slide");
	});
})
});

Answer 1

[origami1024]

У тебя опечатка в названии класса:

toggle_pop-up
toggle_pop_up

+
вместо .toggle("slide") должно быть
.slideToggle(9000)

вот для тестов
https://jsfiddle.net/0dj9cw5b/

Comments

[Михаил Максимов]

Не помогло

[origami1024]

+
вместо .toggle("slide") нужно
.slideToggle(9000)

вот для тестов
https://jsfiddle.net/0dj9cw5b/

Answer 2

[lamer350]

1. $(function(){ }) - тут явно лишний код в jQuery
2. $("#toggle_pop-up") - у вас нет такого ID, есть toggle_pop_up
3. Так же используйте метод .on() для отслеживания клика

По итогу у вас должно получится:

$(document).ready(function() {
  $("#toggle_btn").on('click', function(){
    $("#toggle_pop_up").toggle("slide");
  });
});

Comments

[Михаил Максимов]

Не работает...