Je vais décrire ici une methode qui permet d'obtenir des panel qui s'ouvre avec un effet de slide. Pour cela, j'utilise du html, un peu de CSS mais surtout du javascript. Le script est adapter de celui utlisé sur le site http://www.IanCoyle.com Avec quelque amélioration ;)

Le fichier de gestion des twin : (JSTween.js)

// JSTween Class
// Version 0.9 (beta) by Ian Coyle
 
// i wrote this. so if you copy it - thank me by sending me the link to your site. 
// oh and make the site good :)
 
JSTween = function(nm,id)
{	
	this.isActive=false
	this.myName=nm
	this.speed=8
	this.myID = id;
	this.myResizeInterval;
	this.myMoveInterval;
	this.Path = document.getElementById(this.myID);
 
}
 
JSTween.prototype._resize = function(nH,nW)
{
	var newH = nH;
	var tmpH = parseInt(this.Path.style.height) - ((parseInt(this.Path.style.height)-newH)/this.speed)
 
	var newW = nW;
	var tmpW = parseInt(this.Path.style.width) - ((parseInt(this.Path.style.width)-newW)/this.speed)
	if ( (Math.abs(tmpH-newH)<4)  && (Math.abs(tmpW-newW)<4) ){
		this.Path.style.height=newH + "px";
		this.Path.style.width=newW + "px";
		clearInterval(this.myResizeInterval);
 
	}
	this.Path.style.height= Math.round(tmpH) + "px"
	this.Path.style.width= Math.round(tmpW) + "px"
}
 
JSTween.prototype.Resize = function(nH,nW)
{
	clearInterval(this.myResizeInterval);
	this.myResizeInterval = setInterval(this.myName+"._resize("+nH+","+nW+")",10);
}
 
JSTween.prototype.Move = function(nT,nL)
{
	clearInterval(this.myMoveInterval);
	this.myMoveInterval = setInterval(this.myName+"._move("+nT+","+nL+")",10);
}
 
 
 
JSTween.prototype._move = function(nT,nL)
{
 
	var newT = nT;
	var tmpT = parseInt(this.Path.style.top) - ((parseInt(this.Path.style.top)-newT)/this.speed)
 
	var newL = nL;
	var tmpL = parseInt(this.Path.style.left) - ((parseInt(this.Path.style.left)-newL)/this.speed)
 
	if ( (Math.abs(tmpT-newT)<4)  && (Math.abs(tmpL-newL)<4) ){
		this.Path.style.top=newT + "px";
		this.Path.style.left=newL + "px";
		clearInterval(this.myMoveInterval);
 
	}
 
	this.Path.style.top=Math.round(tmpT) + "px";
	this.Path.style.left=Math.round(tmpL) + "px";
}

le fichier de gestion des mouvements et de l'init (JSMaster.js)

var IDObjContainer="projects";
var IDObj="project";
var NbOfObj=3;
var HeightClosed=35;
var HeightOpen=200;
var WidthClosed=100;
var WidthOpen=150;
 
 
 
var currentnumber = 0;
var isInit = true;
//initialise les objets
for (i=0;i<NbOfObj;i++) {
	eval("var P"+(i+1)+"Tween;");
}
var WrapperTween;
 
function initMe()
{
	WrapperTween = new JSTween("WrapperTween",IDObjContainer);
	var Wpath = document.getElementById(IDObjContainer);
 
	Wpath.style.left="0px"
	Wpath.style.top="0px"
 
	WrapperTween.Move(0,0);
 
	var LoadingPath = document.getElementById("loading");
	LoadingPath.className="notvisible";
 
	for (i=0;i<NbOfObj;i++) {
		eval("document.getElementById(\""+IDObj+(i+1)+"\").style.height="+HeightClosed+"+\"px\";");
		eval("document.getElementById(\""+IDObj+(i+1)+"\").style.width="+WidthClosed+"+\"px\";");
	}
 
	expand(1);
 
	document.getElementById("wrapper").className="nooverflow";
}
function initTweens()
{
	for (i=0;i<NbOfObj;i++) {
		eval("P"+(i+1)+"Tween = new JSTween(\"P"+(i+1)+"Tween\",\""+IDObj+(i+1)+"\");");
	}
	isInit=false;
}
 
function expand(id)
{
	if (isInit){
		initTweens();
	}
	var PathTween = eval("P"+id+"Tween");
	var path = document.getElementById(IDObj + id);
 
	if ((currentnumber!=id)&&(currentnumber!=0)){
		var PathTweenOld = eval("P"+currentnumber+"Tween");
		var pathOld = document.getElementById(IDObj + currentnumber);
 
		if (parseInt(pathOld.style.height)>=HeightOpen-10)
		{
			PathTweenOld.Move(3,0);
			PathTweenOld.Resize(HeightClosed,WidthClosed);
		}
 
	}
 
	if (parseInt(path.style.height)>=HeightOpen-10)
	{
		PathTween.Move(3,0);
		PathTween.Resize(HeightClosed,WidthClosed);
		currentnumber=0;
	}else{
		currentnumber=id
		path.style.height=HeightClosed+"px";
		path.style.width=WidthClosed+"px";
		path.style.top="0px";
		path.style.left="0px"
 
		PathTween.Move(HeightClosed-HeightOpen,0);
		PathTween.Resize(HeightOpen,WidthOpen);
	}
 
 
}

et le fichier html :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="JSTween.js"></script>
<script type="text/javascript" src="JSMaster.js"></script>
<style type="text/css">
.nooverflow{overflow:hidden}
.notvisible{display:none}
</style>
</head>
<body onload="initMe()">
<div id="loading">Chargement en cours</div>
<div id="wrapper" class="nooverflow notvisible">
	<div id="projects" style="background-color:blue" class="nooverflow">
		<div id="project1" style="background-color:green" class="nooverflow">
			<div style="background-color:yellow"><a href="javascript:expand(1)">002</a></div>
			<div style="background-color:purple">
			003
			</div>
		</div>
		<div id="project2" style="background-color:green" class="nooverflow">
			<div style="background-color:yellow"><a href="javascript:expand(2)">005</a></div>
			<div style="background-color:purple">
			006
			<img src="superman[2].jpg" alt="toto"></img>
			</div>
		</div>
		<div id="project3" style="background-color:green" class="nooverflow">
			<div style="background-color:yellow"><a href="javascript:expand(3)">007</a></div>
			<div style="background-color:purple">
			008
			</div>
		</div>
	</div><!--projects-->
</div><!--wrapper-->
</body>
</html>

• Les variables JS

Le fichier JSMaster.js contient certain déclaration importante au tout début du ficher :

var IDObjContainer="projects"; //Nom du div qui contient les div "ouvrables"
var IDObj="project"; //Nom des div ouvrable sans le numéro
var NbOfObj=3; //Nombre de div ouvrable
var HeightClosed=35; //Hauteur des div fermé
var HeightOpen=200; //Hauteur des div ouvert
var WidthClosed=100; //Largeur des div fermé
var WidthOpen=150; //Largeur des div ouvert.

• Les objet HTML

Certain objet HTML ne doivent pas être renomé. C'est le cas de wrapper, loading
Les Div ouvrable sont només et numéroté. Le nom est celui donné dans la déclaration de IDObj. exemple : projet1, projet2 etc….