Выдвижная jQuery панель
Что мы будем делать?
Мы создадим кнопку, по клику на которой будет появляться блок с произвольным содержимым. При повторном клике по кнопке блок будет исчезать. Сама кнопка будет менять внешний вид в зависимости от того, виден блок с содержимым, или нет.
Сначала напишем html разметку для нашей выдвижной панели:
<div class="slide_panel_wrap">
<p></p>
<div class="slide_panel">
В этом блоке может содержаться любой контент.
</div>
</div>
Здесь все предельно просто. Блок с классом slide_panel_wrap играет вспомогательную роль (обертка). В данном примере с его помощью мы сможем отцентрировать всю конструкцию как нам требуется по дизайну. Тегами p оборачиваем кнопку. И, наконец, блок slide_panel является тем самым блоком, который будет появляться и исчезать.
Что бы все выглядело симпатично, добавим нашей конструкции стилевые правила:
.slide_panel_wrap {margin:60px auto; width:200px;}
.slide_panel_wrap p {line-height:30px;}
.slide_panel {padding-top:30px; width:100%; height:70px; border:1px solid #000; background:#e5e5e5; text-align:center; display:none;}
Теперь, когда все выглядит более менее прилично, напишем скрипт, что бы панель с контентом показывалась и пряталась при клике на ссылке. А что бы подсказать, что у нас выдвижная панель, снабдим ссылку стрелкой, которая будет менять направление в зависимости от состояния блока с контентом.
$(document).ready(function(){
$(".slide_panel_wrap p").click(function(){
$(".slide_panel").slideToggle('slow');
$(this).toggleClass("active");
});
return false;
});
Желаемый результат достигнут.
Однако, этот метод не подойдет, если стоит задача расположить выдвижную панель сбоку. О том как решить эту проблему, читайте тут.