Как сделать плавно раскрывающийся DIV

10.03.2014

Столкнулся с задачкой. Нужно было сделать плавно открывающуюся форму.

Результат будет вот таким:

Открыть форму

[hana-code-insert name=’JavaScriptPost’ /]

Опишу более подробно как я все сделал.

Для начала я сверстал все необходимые элементы кнопки, поля формы, саму форму:

<div class="forma">
<div class="open_form">Открыть форму</div>
<div class="sama_forma" >
<form>
<input type="text" value="" size="40" placeholder="Ваше Имя" />
<input type="email" value="" size="40" placeholder="Ваш мэйл" />
<input type="text" value="" size="40" placeholder="Заголовок статьи" />
<textarea placeholder="Ваша статья"></textarea>
Решите пример: <input type="text" value="" size="2" maxlength="2" /> + &#49;&#x34; = 24
<input type="submit" value="Отправить" />
</form>
</div>
</div>

Опишу подробнее классы:
.forma — Блок для всех элементов.
.open_form — Кнопка для открытия формы.
.sama_forma — Форма для обратной связи со всеми полями

Затем добавил немного стилей, чтобы все смотрелось более органично:

.forma {
	text-align: center;
	width: 400px;
	padding: 20px;
	background: #fefefe;
	border: 1px solid #000;
	border-radius: 10px;
}

.open_form {
	border: 1px solid #fc5f00;
	border-radius: 20px;
	font-size: 20px;
	padding: 10px 25px;
	background: #fa9050;
	box-shadow: inset 0 1px 5px rgba(255,255,255,.6), inset 0 -15px 10px 5px #fc5f00, 0 1px 2px rgba(0,0,0,.2);
	text-shadow: 1px 1px 0px #cc4f03;
	width: 200px;
	margin: 0 auto;
	cursor: pointer;
}

.open_form:hover {
	background: #fa9050;
	box-shadow: inset 0 1px 5px rgba(255,255,255,.6), inset 0 -15px 5px 0px #fc5f00, 0 1px 2px rgba(0,0,0,.2);
}


.forma .sama_forma {
	margin-top: 20px;
	display: none;
}

Обратите внимание, что изначально для .forma .sama_forma стоит display:none

Отлично код мы подготовили.

Теперь заставим всю эту конструкцию шевелиться. Обязательно подключаем jQuery вот таким образом:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Когда все готово, добавим после формы скрипт:

<script>
$(document).click( function(event){
	if( $(event.target).closest(".sama_forma").length ) 
	return;
	$(".sama_forma").slideUp("slow");
	event.stopPropagation();
});
$('.open_form').click( function() {
		$(this).siblings(".sama_forma").slideToggle("slow");
		return false;
	});
</script>

Строки скрипта со 2 по 7 заставляют скрыться объект с классом .sama_forma, при клике за его полями.

Строки с 8 по 11 — заставляют объект .sama_forma появиться при клике на объект с классом .open_form

Разбирался я с этим долго, но зато получилось. )

Вот такой код в итоге:

<!DOCTYPE html>
<html>
<head>
	<title>Плавно откроем форму</title>
	
	<!--Подключаем jQuery-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	
	<style>
.forma {
	text-align: center;
	width: 400px;
	padding: 20px;
	background: #fefefe;
	border: 1px solid #000;
	border-radius: 10px;
}
 
.open_form {
    border: 1px solid #fc5f00;
    border-radius: 20px;
    font-size: 20px;
    padding: 10px 25px;
    background: #fa9050;
    box-shadow: inset 0 1px 5px rgba(255,255,255,.6), inset 0 -15px 10px 5px #fc5f00, 0 1px 2px rgba(0,0,0,.2);
    text-shadow: 1px 1px 0px #cc4f03;
    width: 200px;
    margin: 0 auto;
    cursor: pointer;
}
 
.open_form:hover {
    background: #fa9050;
    box-shadow: inset 0 1px 5px rgba(255,255,255,.6), inset 0 -15px 5px 0px #fc5f00, 0 1px 2px rgba(0,0,0,.2);
}
 
 
.forma .sama_forma {
    margin-top: 20px;
    display: none;
}
	</style>
</head>
<body>
<div class="forma">
<div class="open_form">Открыть форму</div>
<div class="sama_forma" >
<form>
<input type="text" value="" size="40" placeholder="Ваше Имя" />
<input type="email" value="" size="40" placeholder="Ваш мэйл" />
<input type="text" value="" size="40" placeholder="Заголовок статьи" />
<textarea placeholder="Ваша статья"></textarea>
Решите пример: <input type="text" value="" size="2" maxlength="2" /> + &#49;&#x34; = 24
<input type="submit" value="Отправить" />
</form>
</div>
</div>

<script>
$(document).click( function(event){
    if( $(event.target).closest(".sama_forma").length ) 
    return;
    $(".sama_forma").slideUp("slow");
    event.stopPropagation();
});
$('.open_form').click( function() {
        $(this).siblings(".sama_forma").slideToggle("slow");
        return false;
    });
</script>
</body>
</html>

Отличный способ сказать спасибо:

Как сделать плавно раскрывающийся DIV

Комментарии Вконтакте

Отзывы