Painel que abri deslize e fecha

COLOQUE AQUI O conteúdo

youtube

Painel

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"><script type="text/javascript">$(document).ready(function(){ // #animation-1 $("#animation-1 li a").hover( function(){ $(this).animate({ textIndent: "30px" }, 500 ); },function(){ $(this).animate({ textIndent: "0px" }, 500 ); }); // #animation-2 $("#animation-2 li a").hover( function(){ $(this).parent().parent().find("li").addClass("off"); $(this).parent().removeClass("off"); $(this).animate({ width: "250px" }, 500 ); },function(){ $(this).parent().parent().find("li").removeClass("off"); $(this).animate({ width: "200px" }, 500 ); }); // #animation-3 $("#animation-3 li").append("<span></span>"); $("#animation-3 li a").hover( function(){ $(this).next("span").animate({ top: "0px" }, 500 ); },function(){ $(this).next("span").animate({ top: "45px" }, 500 ); });}); </script><div id="all"> <ul id="animation-1"></ul> </div> <script src="jquery.js" type="text/javascript"></script><script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script><style type="text/css"> body { margin: 0 auto; padding: 0; width: 1020px; font: 75%/120% Arial, Helvetica, sans-serif; } a:focus { outline: none; } #panel { background: #754c24; height: 200px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #422410; background: url(images/btn-slide.gif) no-repeat center top; /* imagem que servirá como aba */ } .btn-slide { background: url(images/white-arrow.gif) no-repeat right -50px; /* imagem que servirá como seta */ text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; } </style> <div id="panel"> COLOQUE AQUI O conteúdo <img src="http://img7.orkut.com/images/milieu/1293431292/1303061522769/104637499/of/Zmpzhw0.jpg?ver=1303061522&sig=17ab5x3%20" /></div> <a href="http://www.youtube.com/user/asvboas1?feature=mhee">youtube</a> <div class="slide"> <a class="btn-slide" href="http://www.blogger.com/post-edit.do#">Painel</a></div>