change height of div in a loop

to make a collaspable pannel type..

[achshar]

i want to make a collaspable pannel type effect but its kinda heavy and cannot be used almost everywhere... so this is my attemp to make something similar but obviously it dosent work.

i once made similar thing but that was for blur effect.. nd i lost the code so i tried it once again but it does not seem to work this time..

the first cycle does work.. ie the height changes to 99 from 100 but the loop seem to have some problem. i am sure i am missing some thing small here..

function showHideSlide(id){
var h=99;
divHeightSlide(id);
function divHeightSlide(id) {
if(h>0) {
document.getElementById(id).style.height = h+'px';
h=h-1;
setTimeout("divHeightSlide(id)",10);
}
}
}

plz help

[Fotiman]

change your setTimeout line to this:
setTimeout(function(){divHeightSlide(id);},10);

[achshar]

Fotiman thanks for your reply but even i reached that meathod from google.. but it didnt help.. ny vista 32x/chrome,FF behaved unsually when the func ran.. it kinda hanged..

you have to end the browers process, shutting it down, to solve the prob..

but a few hours and i made a new code.. and it works cool in chrome/ie but ff has some probs..

have a look

function hideSlide(id){ 
var h=99; // height of the div
divHeightSlide(); 
function divHeightSlide() { 
if(h>=0) { 
document.getElementById(id).style.height = h+'px'; 
h=h-3; 
setTimeout(divHeightSlide,1); 
}else{hide(id);}
}
}

[john_k]

In your 1st post, setTimeout("divHeightSlide(id)",10); doesn't work because the value of id is never given to setTimeout. When the timeout occurs and divHeightSlide is called, id is not defined and that would cause an error.

In your 2nd post, the else portion calls a function named hide, but your function name is hideSlide.

[achshar]

yes i see that but hide is a different function which turns the div display to none.... so what it does is that when the div height is 0 it sets the display to none so that the extra padding and margin goes off....

function hide(id) {
document.getElementById(id).style.display='none';
}

it works PERFECTLY now.. in chrome ff and ie (all latest versions)

now the only thing is that it is for the fixed height divs...
the first thing that came to my mind was the % height.. but it did not work because the percentage is relative to container div not the height if the div...

any thoughts related to this? like how can this be made in percentage. a perfect example would b torentz[.]com's comments. you click on them and they hide.. i did exactly the same thing but its for fixed height :(

and i am kinda happy on my because i have been able to make this happen exactly as i thought and that too all by myself :)(although my school homework delayed it :P) .. even the speed is kinda controlled.. for first 75 pixels it is 4 px per millisecond (1/1000 second) and last 25 pixels with 1 px/1 millisecond..
have a look

function hideSlide(id){ 
var element = document.getElementById(id);
var h=100; 
divHeightSlide1(); 
function divHeightSlide1() { 
if(h>=0) { 
element.style.height = h+'px'; 
if(h<=25) {
h=h-1;
}else{
h=h-4;
}
setTimeout(divHeightSlide1,1); 
}else{hide(id);}
}
}