Начинающий верстальщик, только учусь. Учебный проект. Эта форма поиска гостиницы должна открываться/закрываться по нажатию на коричневую кнопку. Знаю, что это JS, но не могу понять, как это сделать.
Help!
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсли коротко то пишем в 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>
Выше приведенный вариант правильный, но еще можно это сделать без 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>