Nevertheless there is one question left

Is there any way to make the content of the div to slide down synchronously with the div?

here is the way I’ve optimized the script for my needs:

It’s certainly far away from being perfect I am very new to Javascript, but trying to do my best.

function doSlide(id,id2,id3,id4,id5,id6){
timeToSlide = 120; // in milliseconds
obj = document.getElementById(id);
obj2 = document.getElementById(id2);
obj3 = document.getElementById(id3);
obj4 = document.getElementById(id4);
obj5 = document.getElementById(id5);
obj6 = document.getElementById(id6);

if(obj.style.display == “block”){

slideUp(obj,Math.ceil(obj.offsetHeight/timeToSlide),obj.offsetHeight);

} else {

obj2.style.display = “none”;
obj3.style.display = “none”;
obj4.style.display = “none”;
obj5.style.display = “none”;
obj6.style.display = “none”;
obj.style.display = “block”;
obj.style.visibility = “visialbe”;
height = obj.offsetHeight;
obj.style.height=”0px”;
pxPerLoop = height/timeToSlide;
slideDown(obj,0,height,Math.ceil(height/timeToSlide));

}
}

function slideDown(obj,offset,full,px){
if(offset 0){
obj.style.height = obj.offsetHeight-px+”px”;
setTimeout((function(){slideUp(obj,px,full);}),1);
} else {
obj.style.height=full+”px”; // we reset the height if we were to slide it back down
obj.style.display = ‘none’;
}
}

Big thanks in advance.

Andrew

it\’s brillian scipt u\’ve made there.

Nevertheless I have a couple of questions, and it would be great, if you could help me out.

1) I have a strange bug: when I load the page for the first time (or just refresh it) and then click on the button to perform the slide script for a hidden (display:none) div, then nothing happens untill I press the button for the second time. After I\’ve \"doubleclicked\" the button once, it works flawlessly untill I reload the page. This problem doesn\’t occur if the div which is supposed to slide has no \"display:none\" tag set.

2) I would like to have multiple divs which slide down from the same position when u press different buttons: For Example: I have buttons \"Contact\", \"Products\" and \"Materials\"
So when I press \"Contact\" a div \"Contactdiv\" should slide down. Then if I press \"Products\" the div \"Contactdiv\" should (disappear) and the div \"Productsdiv\" shoud slidedown at its position instead. At the moment it works in the way, that all the divs just slidedown one after another in a vertical line. So I have to force them to (disappear) manualy, but pressing the assigned buttons again.

Big thanks in advance.

Andrew

you don’t have to do anything particular for multiple instance.

Just call up the function with the div id in as argument and it will slide only that particular div.

You can use it with a “virtually” unlimited number of divs…

Tom :

Thanks for sharing this very useful and minimal script!

I would love to get my hands on the script that slides back, but the link is broken. Any chance you still have that script?

It’s done

I would love to get my hands on the script that slides back, but the link is broken. Any chance you still have that script?