ساخت بلاک پایین باز شو برای نمایش اطلاعات مخفی شده

[fotocopy]

سلام دوستان

من یک سایتی طراحی کردم ولی به دلیل حجم زیاد اطلاعات موجود در صفحه، قصد دارم بخشی از این اطلاعات رو مخفی کنم و با کلیک روی دکمه ای که در صفحه تعبیه میشه اطلاعات نمایش/مخفی بشن
2 روزه دارم توی گوگل سرچ میکنم ولی چیزی گیرم نمیاد. البته یه چیزایی پیدا کردم ولی اونی که میخوام نیست.
چیزی که من میخوام به این شکل هست که، یک زبانه در زیر یکی از بلاک های سایت قرار میگیره و وقتی کاربر روی این زبانه کلیک میکنه، زبانه به همراه محتویات مخفی شده، پایین میاد. مثل یک کشوی کمد که وقتی دستگیره کشو رو میکشیم دستگیره هم به همراه کشو بیرون میاد و سرجاش نمیمونه! اکثر نمونه هایی که توی نت هست، دستگیره سرجاش ثابت میمونه و فقط محتویات ظاهر/مخفی میشن

برای اینکه منظورمو بهتر برسونم یک عکس ساده درست کردم و اینجا اتچ میکنم

101309


خواهشمندم راهنماییم کنید و یا اگر کدی سراغ دارید محبت کنید و لینکش رو در اختیارم قرار بدید

[boysilent]

سلام دوست عزیز :
شما اون div که میخوایید مخفی باشه برید داخل فایل css و مقدار
display:none; قرار بدید

وبرای نشان دادن از هم بدین شکل

$(document).ready(function(){


$("#btnshow").click(function(){
$("#apDiv2").show(1000);
$("#apDiv2").css({"left":"414px","top":"10px","width":"406px","height":"300px"});
$("#btnclose").click(function(){
$("#apDiv2").hide(1000);
});
});


ببخشید این کدای خودمه دیگه ویرایش نکردم:)

[fotocopy]

ممنون دوست عزیز
ولی این کد متاسفانه اون چیزی نیست که من دنبالش هستم
نمونه کد توی اینترنت زیاد هست ولی توی همه اونها دکمه (دستگیره) سر جاش ثابت میمونه و به همراه کرکره پایین نمیاد
من میخوام که اون دکمه هم به همراه سایر اطلاعات پایین بیاد
البته یک کدی پیدا کردم، ولی موقعی که بلاک حاوی اطلاعات مخفی هست، به اندازه اون بلاک جای خالی توی صفحه ایجاد میشه و فاصله بسیار زیادی بین اشیاء موجود در صفحه بوجود میاد. در صورتیکه در حالت عادی باید در زمان مخفی بودن اطلاعات، اشیائی که در بالا و پایین بلاک قرار دارند در کنار هم قرار بگیرند و بعد از کلیک روی دکمه، بلاک ظاهر بشه و اشیاء زیر خودش رو به پایین هدایت کنه

[boysilent]

اگه خواستی کدتو یا فایلتو اینجا قرار بده ببینم

[fotocopy]

<div class='multi-dock-menu multi-dock-menu-left' >
<div class="multi-dock-menu-container">
<div class='dock-menu' >
<img src="img/fade_in_button.png" border="0" class="dock-title" alt="Preview" />
<div id="pardise-dock">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

</div>
</div>
</div>
</div>

این هم کد جاوا اسکریپت


jQuery(document).ready(function(){
jQuery('.multi-dock-menu #winners-dock').jqDock({size: 48, labels: "tr" , align : "center" , coefficient:0.15});
jQuery('.multi-dock-menu #pardise-dock').jqDock({size: 48, labels: "tl" , align : "center" , coefficient:0.15});
var dockClick = function(event){
event.stopPropagation();
var $this = jQuery(this).parents('.multi-dock-menu');
$this.css("zIndex" , 1000);
if( $this.hasClass( "multi-dock-menu-left" ) )
$this.animate({top:'-3px'});
else
$this.animate({bottom:'-3px'});
var dockHide = function(){
if( $this.hasClass( "multi-dock-menu-left" ) )
$this.animate({top:'-65px'} , function(){$this.css("zIndex" , "");});
else
$this.animate({bottom:'-65px'} , function(){$this.css("zIndex" , "");});
jQuery(document).unbind("click" , dockHide );
jQuery('.multi-dock-menu .dock-menu > img.dock-title').bind("click" , dockClick );
};
jQuery(document).bind("click" , dockHide );
jQuery('.multi-dock-menu .dock-menu > img.dock-title').unbind("click" , dockClick );
};
jQuery('.multi-dock-menu .dock-menu > img.dock-title').bind("click" , dockClick );
var wrapperWidth = jQuery('#wrapper').width();
jQuery(window).resize(function() {
if( parseInt( jQuery(window).width() ) <= parseInt(wrapperWidth)+37 )
jQuery('.multi-dock-menu').hide();
else
jQuery('.multi-dock-menu').show();
});
});


کد CSS

.multi-dock-menu{
position:relative;
bottom:-75px;
overflow:visible;
}
* html .multi-dock-menu{

}
.multi-dock-menu .multi-dock-menu-container .dock-menu{
position:relative;
width:916px;
}
.multi-dock-menu .multi-dock-menu-container .dock-menu .jqDockWrap{
margin:0 auto;
}
.multi-dock-menu img.dock-title{
position:absolute;
left:50px;
top:-37px;
cursor:pointer;
}
.multi-dock-menu .multi-dock-menu-container .dock-menu .jqDockLabelLink
{
width:916px;
text-align:right;
color:#444;
z-index:1000;
display:none;
}
.multi-dock-menu .multi-dock-menu-container .dock-menu .jqDockLabelLink .jqDockLabelText
{
margin-right:48px;
padding:2px;
opacity:0.8;
filter:alpha(opacity=80%);
text-align:center;
}
.multi-dock-menu-left .multi-dock-menu-container .dock-menu .jqDockLabelLink
{
text-align:left;

}
.multi-dock-menu-left .multi-dock-menu-container .dock-menu .jqDockLabelLink .jqDockLabelText
{
margin-left:48px;
}
.multi-dock-menu-left{
top:-65px;
bottom:auto;
}
.multi-dock-menu-left img.dock-title{
bottom:-10px;
top:auto;
}

[hamiii]

موقعیت دستگیره رو به کمک ویژگی position در css نسبت به پایین باکس ثابت کنید.مشکلتون حل میشه.