function show hide with slide

[thejoker31]

Hello
I ve wrote this code to show hide some texte (div) with slide effect
wihout the slide it s ok

with the slide it s ok too But only one time for each item....
the display after stay in none and width stay at 0

javascript


function SuiteH(thingId){
// On ajoute la div a afficher et sa hauteur
/// on recupere le nombre d'id
z=0;
for(i=1; i<=10;i++){
if (document.getElementById("divid" + i) ) z++;
}
//alert ('toto '+z);
//on recupere id de la div a cacher
IDaC=0;
NbId =1;
for (i = 1; i <= z; i++) {
var objet = document.getElementById("divid" + i) ;
//alert ('tutu '+document.getElementById("divid" + i).style.display);
if (objet.style.display == "block") {
IDaC=NbId;
}
NbId++;
}
//alert ('toto '+IDaC);
//on definit la largeur(hauteur) a reduire
largeur = 600;
///on cache la div
//var i;
var targetElement;
//for(i=1; i<=NbId;i++){
/* targetElement = document.getElementById("divid" + i) ;
targetElement.style.display = "none" ;*/
if (IDaC != "0") {
alert ('tata '+IDaC);
var targetElement = document.getElementById("divid" + IDaC);
var lFinalH = 0; //largeur finale
var lActuelH = largeur; //largeur initiale
var timer;
var fctH = function(){
lActuelH -= 10; //Augmente la largeur de -10px
targetElement.style.width = lActuelH + 'px';
if (lActuelH <= lFinalH) {
clearInterval(timer); //Arrête le timer
//targetElement.style.overflow = 'hidden';
targetElement.style.display = "none";
targetElement.style.width = "0"; // Fix du cache de la div +++
}
};
fctH();
timer = setInterval(fctH, 1); //Toutes les 1 ms
//IDaC.innerHTML = "+";
document.getElementById("divid" + IDaC).value = "+";
}
// }
//on montre la div
var objet;
var linal;
var lActuel;
largeur2=600;
var objet = document.getElementById("divid" + thingId) ; // entre les deux le nom du div que tu veux faire apparaître
if (objet.style.display == "none" /*|| !objet.style.display*/) {
alert ('titi '+thingId);

//objet.style.width = "400px";
//objet.style.overflow = "hidden";
//thingId.innerHTML = "-";
document.getElementById("divid" + thingId).value = "-";
var lFinal = largeur2; //largeur finale (la largeur une fois que ça aura fini de déplier)
var lActuel = 0; //largeur initiale (la hauteur au début)
var timer;

var fct = function(){
lActuel += 10; //Augmente la largeur de 10px
objet.style.width = lActuel + 'px';
if (lActuel > lFinal) {
clearInterval(timer); //Arrête le timer
/*objet.style.overflow = 'inherit';*/
}
};
fct();
timer = setInterval(fct, 1); //Toutes les 1 ms
objet.style.display = "block";
}
}

Code HTML :


<a href="#" onclick="SuiteH('1')">et encore...</a><br />
<a href="#" onclick="SuiteH('2')">et plus...</a><br /><br />

<div id="bloc6">
<div id="divid1" style="position: absolute;display: none; width: 0px;background-color : #734994; color : #ffffff;filter:alpha(opacity=90);opacity:0.9;">
texte
</div>
<div id="divid2" style="position: absolute;display: none; width: 0px;background-color : #734994; color : #ffffff;filter:alpha(opacity=90);opacity:0.9;">
texte
</div>
</div>

[vwphillips]

.....
alert ('tata '+IDaC);
var targetElement = document.getElementById("divid" + IDaC);
var lFinalH = 0; //largeur finale
var lActuelH = largeur; //largeur initiale
var timer;
var fctH = function(){
lActuelH -= 10; //Augmente la largeur de -10px
targetElement.style.width = Math.max(lActuelH,0) + 'px'; // ensure the width is > or = 0
if (lActuelH <= lFinalH) {
clearInterval(timer); //Arrête le timer
//targetElement.style.overflow = 'hidden';
targetElement.style.display = "none";
targetElement.style.width = "0px"; // Fix du cache de la div +++
}
};
// fctH(); // not required
timer = setInterval(fctH,20); // the minimum is about 20 ms
//IDaC.innerHTML = "+";
document.getElementById("divid" + IDaC).value = "+";
}
// }