Выпадающая панель Jquery

Из этого поста вы узнаете как сделать выпадающую панель. Для создания выпадающей панели нам понадобится подключить библиотеку Jquery. Панель которую мы будем создавать будет выпадать при нажатие на кнопку «Посмотреть» и сворачиваться при нажатие на кнопку «Свернуть». Все это будет выглядеть примерно так

Создадим панель внутри панели создадим кнопку, которая будет выполнять функцию сворачивания панели. За пределами панели создадим кнопку, которая будет выполнять функцию показа панели.

<div id="panel">
	<!-- Вставляем контент -->
	<p class="slider btn-hide">
		<a href="#" class="btn-slider"></a>
	</p>	
</div>

<p class="slide"><a href="#" class="btn-slide"></a></p>

В файле со скриптом пропишем функции для двух кнопок, когда одна из кнопок будет активна будем прятать вторую.

$(document).ready(function(){
	/*РАЗВЕРНУТЬ ПАНЕЛЬ*/
	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(".slider").toggleClass('btn-hide');
		$(".slide").toggleClass('btn-hide');
		$(".btn-slider").toggleClass('active');
		return false;
	});
	/*СВЕРНУТЬ ПАНЕЛЬ*/
	$(".btn-slider").click(function(){
		$("#panel").slideToggle("slow");
		$(".slider").toggleClass('btn-hide');
		$(".slide").toggleClass('btn-hide');
		$(".btn-slider").toggleClass('active');
		return false;
	});	 
});

Качаем готовый пример — Скачать