0

Начинающий верстальщик, только учусь. Учебный проект. Эта форма поиска гостиницы должна открываться/закрываться по нажатию на коричневую кнопку. Знаю, что это JS, но не могу понять, как это сделать.

Help!

форма

2 ответа 2

1

Если коротко то пишем в html кнопку стилизуем её и это будет высота нашего родителя и скрываем всё что за его пределами....при клике на кнопку делаем высоту автоматически

$("button").on("click", function() {
  $(".item").toggleClass("visible");
})
.item {
  width: 400px;
  margin: auto;
  border: 1px solid #ccc;
  overflow: hidden;
  height: 70px;
}

.it {
  padding: 40px 0;
}

.item button {
  display: block;
  width: 100%;
  height: 70px;
  border: none;
}

.visible {
  height: auto;
}
<div class="item">
  <button>Копка</button>
  <div class="it">
    Здесь форма поиска
    <p>Или ещё какая то информация</p>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

0

Выше приведенный вариант правильный, но еще можно это сделать без toggle, а просто с помощью добавления класса active, таким образом мы получаем возможность привязаться к этому классу, и узнавать нужную нам информацию, а еще красивую, плавную анимацию. :)

(function( $ ) {
		var object = {
			toggleButton: '.toggle-button',
			formContainer: '.container form'
		};

		$(object.toggleButton).on('click', function() {
			var form = $(object.formContainer);

			if (form.hasClass('active')) {
				form.fadeOut('slow').removeClass('active');
			} else {
				form.fadeIn('slow').addClass('active');
			}
		});
	})(jQuery);	
html, body {
		margin: 0;
		padding: 0;
	}
	.container {
		width: 200px;
		margin: 0 auto;
	}
	.container .toggle-button {
		background-color: black;
		color: white;
		text-align: center;
		height: 50px;
		border-bottom: 2px solid white;
	}
	.container .toggle-button p {
		margin: 0;
		line-height: 50px;
		cursor: pointer;
	}
	.container form {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background-color: black;
		padding: 10px;
		box-sizing: border-box;
	}
	.container form input:not(:first-child), 
	.container form button {
		margin-top: 10px;
	}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div class="container">
		<div class="toggle-button">
			<p>Открыть/Скрыть форму</p>
		</div>
		<form>
			<input type="text" name="first_name">
			<input type="text" name="last_name">
			<button type="submit">DONE</button>
		</form>
	</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.