Pannello a comparsa

<style type="text/css">
#pannello{
	width:440px;
	height:500px;
	position:fixed;
	top:100px;
	right:-400px;
	z-index:10;
	-moz-transition:all ease-in-out .5s;
	-webkit-transition:all ease-in-out .5s;
	-o-transition:all ease-in-out .5s;
	-ms-transition:all ease-in-out .5s;
	transition:all ease-in-out .5s;
}
#pannello.transition{
	right:0;
}
#contenutodestro>div{
	display:none;
}
#boxdestro {
	width:400px;
	height:500px;
	background:#fff;
	float:right;
}
#iconsetdestro{
	float:left;
	width:32px;
}
#icondestro{
	cursor:pointer;
	display:block;
}
.unoicon{
	background:url("images/uno.png") no-repeat;
}
.dueicon{
	background:url("images/due.png") no-repeat;
}
.treicon{
	background:url("images/tre.png") no-repeat;
}
</style>

<div id="pannello">

<div id="iconsetdestro">
<div id="icondestro" class="unoicon"><img src="<?php bloginfo('template_directory'); ?>/pannellodestro/images/uno.png" /></div>

<div id="icondestro" class="dueicon"><img src="<?php bloginfo('template_directory'); ?>/pannellodestro/images/due.png" /></div>

<div id="icondestro" class="treicon"><img src="<?php bloginfo('template_directory'); ?>/pannellodestro/images/tre.png" /></div>


</div> <!-- ICONSETDESTRO -->

<div id="boxdestro"><!-- boxdestro -->
<div id="contenutodestro"><!-- contenutodestro -->

<div id="unocontenuto">
<!-- INIZIO unocontenuto -->
<div style="background-color:#0F0">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<!-- FINE unocontenuto -->
</div>

<!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@ -->

<div id="duecontenuto">
<!-- INIZIO duecontenuto -->
<div style="background-color:#C63">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<!-- FINE duecontenuto -->
</div>

<!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@ -->

<div id="trecontenuto">
<!-- INIZIO trecontenuto -->
<div style="background-color:#36F">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<!-- FINE trecontenuto -->
</div>

<!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@ -->


</div><!-- contenutodestro -->
</div><!-- boxdestro -->

</div><!-- pannello -->

<script type="text/javascript">

$(document).ready(function() {

		//UNO
		if (!$("#pannello").hasClass("transition")){
			$(".unoicon").live("click", function (){
												$("#pannello").addClass("transition");
												$("#contenutodestro>div").css("display","none");
												$("#unocontenuto").css("display","block");});
			$(".unoicon").die("click", function (){
												$("#pannello").removeClass("transition");});//click

		}//if
		else if ($("#pannello").hasClass("transition")){
			$(".unoicon").live("click", function (){
												$("#contenutodestro>div").css("display","none");
												$("#unocontenuto").css("display","block");});
			$(".unoicon").die("click", function(){
												$("#pannello").removeClass("transition");});//click
		}//else if


		//DUE
		if (!$("#pannello").hasClass("transition")){
			$(".dueicon").live("click", function (){
												$("#pannello").addClass("transition");
												$("#contenutodestro>div").css("display","none");
												$("#duecontenuto").css("display","block");});
			$(".dueicon").die("click", function (){
												$("#pannello").removeClass("transition");});//click

		}//if
		else if ($("#pannello").hasClass("transition")){
			$(".dueicon").live("click", function (){
												$("#contenutodestro>div").css("display","none");
												$("#duecontenuto").css("display","block");});
			$(".dueicon").die("click", function(){
												$("#pannello").removeClass("transition");});//click
		}//else if


		//TRE
		if (!$("#pannello").hasClass("transition")){
			$(".treicon").live("click", function (){
												$("#pannello").addClass("transition");
												$("#contenutodestro>div").css("display","none");
												$("#trecontenuto").css("display","block");});
			$(".treicon").die("click", function (){
												$("#pannello").removeClass("transition");});//click

		}//if
		else if ($("#pannello").hasClass("transition")){
			$(".treicon").live("click", function (){
												$("#contenutodestro>div").css("display","none");
												$("#trecontenuto").css("display","block");});
			$(".treicon").die("click", function(){
												$("#pannello").removeClass("transition");});//click
		}//else if


}); // document ready function
</script>