Уроки по программированию

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

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

drop-panel

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

<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;
	});	 
});

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

Комментарии к статье

  • Аватарка 06.03.2014

    Спасибо большое за статью! очень просто и понятно!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *