[jQuery] Wysuwający się z boku ekranu panel

<div id="box-lewy">
        <div id="panel">
            <h2>Wysuwający się panel</h2>
            <ul>
                <li>coś</li>
                <li>coś</li>
                <li>coś</li>
                <li>coś</li>
            </ul>
            <form>
                <input type="text" />
                <input type="submit" value="Przycisk"/>
            </form>
        <div id="ukryj">
            <a href="#">&laquo; Ukryj panel</a></div>
        </div>
    </div>
    <div id="pokaz">
    	<span>&raquo;</span>
    </div>
    <div id="tresc">
         Któż by chybiano względy dla tylu, tak i smuci, i w ciąg powieści, pytań wykrzykników i objął gospodarstwo. przyrzekł na pamiątkę, że nas reformować cywilizować będzie i cap! - tak Skwarów w pustki prowadzić. Po cóż te łupy zdobyte. Tuż myśliwców herbowe klejnoty wyryte i nigdy nie policzę. Opuszczali rodziców i sukienka biała, świeżo polewane. Tuż myśliwców herbowe klejnoty wyryte i czuł choroby zaród. Krzyczano na wzmiankę Warszawy rzekł, podniósłszy głowę: Pan świata wie, jak w okolicy. i grabiska suwane po kryjomu. Chłopiec, co jasnej bronisz Częstochowy i pijąc obie kłóciły się dowie kto cię trzeba cenić, ten zamek na.
     </div>

<div id="box-lewy"> <div id="panel"> <h2>Wysuwający się panel</h2> <ul> <li>coś</li> <li>coś</li> <li>coś</li> <li>coś</li> </ul> <form> <input type="text" /> <input type="submit" value="Przycisk"/> </form> <div id="ukryj"> <a href="#">&laquo; Ukryj panel</a></div> </div> </div> <div id="pokaz"> <span>&raquo;</span> </div> <div id="tresc"> Któż by chybiano względy dla tylu, tak i smuci, i w ciąg powieści, pytań wykrzykników i objął gospodarstwo. przyrzekł na pamiątkę, że nas reformować cywilizować będzie i cap! - tak Skwarów w pustki prowadzić. Po cóż te łupy zdobyte. Tuż myśliwców herbowe klejnoty wyryte i nigdy nie policzę. Opuszczali rodziców i sukienka biała, świeżo polewane. Tuż myśliwców herbowe klejnoty wyryte i czuł choroby zaród. Krzyczano na wzmiankę Warszawy rzekł, podniósłszy głowę: Pan świata wie, jak w okolicy. i grabiska suwane po kryjomu. Chłopiec, co jasnej bronisz Częstochowy i pijąc obie kłóciły się dowie kto cię trzeba cenić, ten zamek na. </div>

#box-lewy { 
	width: 250px; 
	margin-top: 10px; 
	float: left; 
	overflow: hidden; 
	background: #333;
	color: #FFFFFF;
}
#box-lewy h2 {
	text-align: center;
}
#pokaz { 
	position: inherit; 
	z-index: 2; 
	left: 0; 
	float: left; 
	padding-top: 40px; 
	display: none; 
	width: 0px; 
	height: 100px; 
	cursor: pointer;
}
#pokaz span {
	display: block; 
	font-size: 24px; 
	height: 30px; 
	margin-top: 20px; 
	padding: 10px 0 10px 10px; 
	width: 20px; 
	background: #333;
}
#tresc { 
	padding-top:10px; 
	color:#1c1c1c; 
	margin-left:200px; 
}

#box-lewy { width: 250px; margin-top: 10px; float: left; overflow: hidden; background: #333; color: #FFFFFF; } #box-lewy h2 { text-align: center; } #pokaz { position: inherit; z-index: 2; left: 0; float: left; padding-top: 40px; display: none; width: 0px; height: 100px; cursor: pointer; } #pokaz span { display: block; font-size: 24px; height: 30px; margin-top: 20px; padding: 10px 0 10px 10px; width: 20px; background: #333; } #tresc { padding-top:10px; color:#1c1c1c; margin-left:200px; }

jQuery(document).ready(function(){
 $("#ukryj").click(function(){
 $("#panel").animate({marginLeft:"-250px"}, 500 );
 $("#box-lewy").animate({width:"0px", opacity:0}, 400 );
 $("#pokaz").show("normal").animate({width:"28px", opacity:1}, 200);
 $("#tresc").animate({marginLeft:"50px"}, 500);
 });
 
 $("#pokaz").click(function(){
 $("#tresc").animate({marginLeft:"200px"}, 200);
 $("#panel").animate({marginLeft:"0px"}, 400 );
 $("#box-lewy").animate({width:"250px", opacity:1}, 400 );
 $("#pokaz").animate({width:"0px", opacity:0}, 600).hide("slow");
 });
});

jQuery(document).ready(function(){ $("#ukryj").click(function(){ $("#panel").animate({marginLeft:"-250px"}, 500 ); $("#box-lewy").animate({width:"0px", opacity:0}, 400 ); $("#pokaz").show("normal").animate({width:"28px", opacity:1}, 200); $("#tresc").animate({marginLeft:"50px"}, 500); }); $("#pokaz").click(function(){ $("#tresc").animate({marginLeft:"200px"}, 200); $("#panel").animate({marginLeft:"0px"}, 400 ); $("#box-lewy").animate({width:"250px", opacity:1}, 400 ); $("#pokaz").animate({width:"0px", opacity:0}, 600).hide("slow"); }); });

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="mojkod.js"></script>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="mojkod.js"></script>