Выдвижной блок на сайта js, дублирование блока

Здравствуйте, делаю сайт, на сайте есть панелька которая по кнопке выдвигается.

Хочу сделать три варианта данного блока:

Регистрация, Поиск по сайту, Авторизация

Решил попробовать сделать так, скопировал я первый блок и продублировал его и так же js но вписал id другой который будет совпадать с формой выдвижки.

JS

<script type="text/javascript">

$(document).ready(function(){

$(".btn-slide").click(function(){

$("#panel").slideToggle("slow");

$(this).toggleClass("active"); return false;

});

});

</script>



<script type="text/javascript">

$(document).ready(function(){

$(".btn-slide1").click(function(){

$("#panel1").slideToggle("slow");

$(this).toggleClass("active"); return false;

});

});

</script>



<script type="text/javascript">

$(document).ready(function(){

$(".btn-slide2").click(function(){

$("#panel2").slideToggle("slow");

$(this).toggleClass("active"); return false;

});

});

</script>

HTML

<div id="panel1">

<div class="panelinfo1">

111

</div></div>

<p class="slide1"><a  href="#" title="Авторизация на сайте, добавить анкету" class="btn-slide1">АВТОРИЗАЦИЯ</a></p>



<div id="panel">

<div class="panelinfo">

222

</div></div>

<p class="slide"><a href="#" class="btn-slide">ПОИСК ПО САЙТУ</a></p>





<div id="panel2">

<div class="panelinfo2">

333

</div></div>

<p class="slide2"><a href="#" title="Регистрация на сайте, добавить анкету" class="btn-slide2">РЕГИСТРАЦИЯ</a></p>

Стили у кнопок одни и те-же, а вот когда блок выдвигает то там только размеры разные блока.

CSS

#panel {

margin-right: auto;

margin-left: auto;

background: #FFCCE2;

height: 400px;

min-height: 300px;

display: none;

width:1081px;

-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);

-moz-box-shadow:    0px 5px 9px 0px rgba(50, 50, 50, 0.32);

box-shadow:         0px 5px 9px 0px rgba(50, 50, 50, 0.32);

border-bottom: solid 3px #D23771;

z-index: 980;

}

.panelinfo{

padding: 18px 10px 10px 10px;

}

.borderpanel{

padding-top: 45px;

width:100%;

border-bottom: solid 3px #FFCCE2;

-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);

-moz-box-shadow:    0px 5px 9px 0px rgba(50, 50, 50, 0.32);

box-shadow:         0px 5px 9px 0px rgba(50, 50, 50, 0.32);

position: relative;

z-index: 1010;

}

.slide {

margin: 0;

padding: 0;

}

.btn-slide {

position: absolute;

display: block;

font-size: 14px;

font-weight: bold;

background: #fff;

text-align: center;

width: 340px;

height: 40px;

line-height: 40px;

color: #000;

margin: 0 auto;

text-decoration: none;

border-left: solid 3px #fff;

border-right: solid 3px #fff;

border-bottom: solid 3px #fff;

-moz-border-radius-bottomright: 10px;

-webkit-border-bottom-right-radius: 10px;

border-bottom-right-radius: 10px;

-moz-border-radius-bottomleft: 10px;

-webkit-border-bottom-left-radius: 10px;

border-bottom-left-radius: 10px;

margin-bottom: 15px;

-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);

-moz-box-shadow:    0px 5px 9px 0px rgba(50, 50, 50, 0.32);

box-shadow:         0px 5px 9px 0px rgba(50, 50, 50, 0.32);

-webkit-transition: background 0.8s ease;

-moz-transition: background 0.8s ease;

-o-transition: background 0.8s ease;

-khtml-transition: background 0.8s ease;

transition: background 0.8s ease;

}

.btn-slide a{

color: #000;

}

.btn-slide:hover{

background: #D23771;

color: #fff;

border-left: solid 3px #fff;

border-right: solid 3px #fff;

border-bottom: solid 3px #fff;

-webkit-transition: background 0.8s ease;

-moz-transition: background 0.8s ease;

-o-transition: background 0.8s ease;

-khtml-transition: background 0.8s ease;

transition: background 0.8s ease;

}



#panel1 {

margin-top: 0px;

background: #FFCCE2;

height: 300px;

display: none;

width:346px;

-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);

-moz-box-shadow:    0px 5px 9px 0px rgba(50, 50, 50, 0.32);

box-shadow:         0px 5px 9px 0px rgba(50, 50, 50, 0.32);

border-bottom: solid 3px #D23771;

z-index: 1000;

}

.panelinfo1{

padding: 18px 10px 10px 10px;

}

.borderpanel1{

padding-top: 45px;

width:100%;

border-bottom: solid 3px #FFCCE2;

-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);

-moz-box-shadow:    0px 5px 9px 0px rgba(50, 50, 50, 0.32);

box-shadow:         0px 5px 9px 0px rgba(50, 50, 50, 0.32);

}

.slide1 {

margin: 0;

padding: 0;

}

.btn-slide1 {

display: block;

font-size: 14px;

font-weight: bold;

background: #fff;

text-align: center;

width: 340px;

height: 40px;

line-height: 40px;

color: #000;

float: left;

text-decoration: none;

border-left: solid 3px #fff;

border-right: solid 3px #fff;

border-bottom: solid 3px #fff;

-moz-border-radius-bottomright: 10px;

-webkit-border-bottom-right-radius: 10px;

border-bottom-right-radius: 10px;

-moz-border-radius-bottomleft: 10px;

-webkit-border-bottom-left-radius: 10px;

border-bottom-left-radius: 10px;

margin-bottom: 15px;

-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);

-moz-box-shadow:    0px 5px 9px 0px rgba(50, 50, 50, 0.32);

box-shadow:         0px 5px 9px 0px rgba(50, 50, 50, 0.32);

-webkit-transition: background 0.8s ease;

-moz-transition: background 0.8s ease;

-o-transition: background 0.8s ease;

-khtml-transition: background 0.8s ease;

transition: background 0.8s ease;

}

.btn-slide1 a{

color: #000;

}

.btn-slide1:hover{

background: #D23771;

color: #fff;

border-left: solid 3px #fff;

border-right: solid 3px #fff;

border-bottom: solid 3px #fff;

-webkit-transition: background 0.8s ease;

-moz-transition: background 0.8s ease;

-o-transition: background 0.8s ease;

-khtml-transition: background 0.8s ease;

transition: background 0.8s ease;

}



#panel2 {

margin-top: -58px;

background: #FFCCE2;

height: 100%;

min-height: 300px;

display: none;

width:100%;

-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);

-moz-box-shadow:    0px 5px 9px 0px rgba(50, 50, 50, 0.32);

box-shadow:         0px 5px 9px 0px rgba(50, 50, 50, 0.32);

border-bottom: solid 3px #D23771;

z-index: 1000;

}

.panelinfo2{

padding: 18px 10px 10px 10px;

}

.borderpanel2{

padding-top: 45px;

width:100%;

border-bottom: solid 3px #FFCCE2;

-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);

-moz-box-shadow:    0px 5px 9px 0px rgba(50, 50, 50, 0.32);

box-shadow:         0px 5px 9px 0px rgba(50, 50, 50, 0.32);

margin-top: -58px;

}

.slide2 {

margin: 0;

padding: 0;

margin-top: -58px;

}

.btn-slide2 {

display: block;

font-size: 14px;

font-weight: bold;

background: #fff;

text-align: center;

width: 340px;

height: 40px;

line-height: 40px;

color: #000;

float: right;

text-decoration: none;

border-left: solid 3px #fff;

border-right: solid 3px #fff;

border-bottom: solid 3px #fff;

-moz-border-radius-bottomright: 10px;

-webkit-border-bottom-right-radius: 10px;

border-bottom-right-radius: 10px;

-moz-border-radius-bottomleft: 10px;

-webkit-border-bottom-left-radius: 10px;

border-bottom-left-radius: 10px;

margin-bottom: 15px;

-webkit-box-shadow: 0px 5px 9px 0px rgba(50, 50, 50, 0.32);

-moz-box-shadow:    0px 5px 9px 0px rgba(50, 50, 50, 0.32);

box-shadow:         0px 5px 9px 0px rgba(50, 50, 50, 0.32);

-webkit-transition: background 0.8s ease;

-moz-transition: background 0.8s ease;

-o-transition: background 0.8s ease;

-khtml-transition: background 0.8s ease;

transition: background 0.8s ease;

}

.btn-slide2 a{

color: #000;

}

.btn-slide2:hover{

background: #D23771;

color: #fff;

border-left: solid 3px #fff;

border-right: solid 3px #fff;

border-bottom: solid 3px #fff;

-webkit-transition: background 0.8s ease;

-moz-transition: background 0.8s ease;

-o-transition: background 0.8s ease;

-khtml-transition: background 0.8s ease;

transition: background 0.8s ease;

}

Можно стиль кнопки один и тот же сделать, а стиль блоков нужен разный.

Для Авторизации блок не большой, для регистрации так же, для поиска по сайту, большой.

Все щас работает, но когда нажимаю что бы выдвинуть, то он спускает и все другие кнопки и глючит, я как только не мутил со стилями, замучился, походу не хватает моих знаний.

Нужно сделать так с верху три кнопки, как щас сделано

(Скрин 1)

Скрин 2

При нажатии на кнопку, раскрывается само поле, и видно что спустилось в низ и с кнопкой все правильно, но то же спустились другие кнопки. а они должны быть с верху прижаты.

КАЖДЫЙ БЛОК ДОЛЖЕН БЫТЬ ИНДИВИДУАЛЬНЫМ И НЕ БЫТЬ ПРИВЯЗАН К ДРУГ ДРУГУ, КАК то так.

Помогите решить проблему.