Ci dessous mon code: une fonction qui permet de faire cacher et montrer un div et le code html permettant d'affichant 6 boites ( 3en haut et trois en bas). Mon problème c'est dans l'affichage, je ne sais pa comment appelr mes div pour faire en sorte qu'à chque fois que je veux ouvrir une boite elle s'ouvre juste en dessous du titre correspondant. Alrs que pour l'instant chaque que je veux ouvrir une boite elle s'ouvre à la eme place.
Merci
<script type="text/javascript">
function Suite(lien,affiche){
var objet = document.getElementById(affiche); // entre les deux ' tu mes le nom du div que tu veux faire apparaître !
if(objet.style.display == "none" || !objet.style.display){
objet.style.display = "block";
objet.style.overflow = "hidden";
lien.innerHTML = "<img src='include/ico/16/fermer.gif'>";
var hFinal = 100; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
var hActuel = 0; //Hauteur initiale (la hauteur dès le début !)
var timer;
var fct = function ()
{
hActuel += 20; //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
objet.style.height = hActuel + 'px';
if( hActuel > hFinal)
{
clearInterval(timer); //Arrête le timer
objet.style.overflow = 'inherit';
}
};
fct();
timer = setInterval(fct,40); //Toute les 40 ms
}else if(objet.style.display == "block"){
var hFinal = 0; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
var hActuel = 100; //Hauteur initiale (la hauteur dès le début !)
var timer;
var fct = function ()
{
hActuel -= 20; //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !
objet.style.height = hActuel + 'px';
if( hActuel <= 20 )
{
clearInterval(timer); //Arrête le timer
objet.style.display = "none";
}
};
fct();
timer = setInterval(fct,40); //Toute les 40 ms
lien.innerHTML = "<img src='include/ico/16/ouvrir.gif'>";
}
}
</script>
</head>
-----------------------------------------------------------------------------------------------------------
<body>
<table>
<tr >
<td class="containerHeaderBoite" style="width: 200px;">
ESCALA
</td>
<td id="1" class="containerHeaderBoite" style="width: 20px;">
<a href="javascript:;" onclick="Suite(this,'popup1')"><img src='include/ico/16/ouvrir.gif'></a>
</td>
<td class="containerHeaderBoite" style="width: 200px;">
GCOS
</td>
<td id="2" class="containerHeaderBoite" style="width: 20px;">
<a href="javascript:;" onclick="Suite(this,'popup2')"><img src='include/ico/16/ouvrir.gif'></a>
</td>
<td class="containerHeaderBoite" style="width: 200px;">
NOVASCALE
</td>
<td class="containerHeaderBoite" style="width: 20px;">
<a href="javascript:;" onclick="Suite(this,'popup3')"><img src='include/ico/16/ouvrir.gif'></a>
</td>
</tr>
<tr >
<td class="containerHeaderBoite" style="width: 200px;">
ESCALA
</td>
<td class="containerHeaderBoite" style="width: 20px;">
<a href="javascript:;" onclick="Suite(this,'popup4')"><img src='include/ico/16/ouvrir.gif'></a>
</td>
<td class="containerHeaderBoite" style="width: 200px;">
GCOS
</td>
<td class="containerHeaderBoite" style="width: 20px;">
<script>var popup2="popup5";</script>
<a href="javascript:;" onclick="Suite(this,'popup5')"><img src='include/ico/16/ouvrir.gif'></a>
</td>
<td class="containerHeaderBoite" style="width: 200px;">
NOVASCALE
</td>
<td class="containerHeaderBoite" style="width: 20px;">
<script>var popup3="popup6";</script>
<a href="javascript:;" onclick="Suite(this,'popup6')"><img src='include/ico/16/ouvrir.gif'></a>
</td>
</tr>
<tr>
<td id="1"> <div id="popup1" style="display: none; border: #000000 2px solid;"></div></td>
<td id="2"> <div id="popup2" style="display: none; border: #000000 2px solid;"></div> </td>
<td> <div id="popup3" style="display: none; border: #000000 2px solid;"></div> </td>
<td> <div id="popup4" style="display: none; border: #000000 2px solid;"></div> </td>
<td> <div id="popup5" style="display: none; border: #000000 2px solid;"></div> </td>
<td> <div id="popup6" style="display: none; border: #000000 2px solid;">
</div> </td>
</td>
</tr>
</table>
Info