Congrats for the code; light, fast and simply!

But, you sure it’ll work on all browsers and be efficient as other sliders which use libraries?

brilliant

Hi All please add in the container which sliding down as overflow:hidden; in css!

Thank you for the useful and less content code http://www.djpate.com team…

Hello all,

I improved the script a bit so that the element also slides back.
When the element’s display is none it slides open.
When the element’s display is other that none it slides back.

You can find the script here:
http://www.guitardistrict.net/modules/jscripts/slide.js

cheers!

Hello Christophe,

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

Hey Christophe, thank you very much for your tips. I’ve already solved the problem with some other solution.

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