- 06
- Mar
Well, my last tutorial post about creating a collapsible div (no animation) was a huge hit, receiving over 1100 diggs.
I actually learned quite a bit from the comments. First of all, I implemented the wp-cache 2.0 so my server doesn’t go down after 70-100 diggs again, haha. Secondly, I found people wanted animation… Digg comment style sliding. I can do that. 
So, expanding on the last tutorial, I’ve coded a small Javascript library that will allow that functionality. It’s not meant to be a mootools or a script.aculo.us replacement… those are far more advanced libraries. This is just a simple, quick bit of code you can apply to your websites to improve the user experience a bit.
In this tutorial, we will create functions to slide DIVs up and down. It supports multiple animations happening simultaneously, as well as a variable animation length. It’s also time-based, rather than increment based, so it’ll animate the same speed on most computers; old computers won’t take 10 minutes for a DIV to slide down.
Click here to see the final product.
First, create a new file on your webserver called motionpack.js - this is where we will store all the javascript functions for the animations, rather than cluttering up the top of the webpage itself, and slowing down it’s load time. In the beginning of that file, let’s first declare some initial variables:
var timerlen = 5; These are the variables you will change if you want to tweak the speed of the animation on your site. timerlen is how often the Javascript function will run to alter the DIV’s properties (altering height or opacity)… it’s probably best to leave this at 5. Any lower will be slightly smoother, but will require your visitors have a better computer (otherwise it’ll be choppy), and much higher will be choppy on everyone, because it’s not updating enough to look smooth. The next variable, slideAniLen, is how long it should take a DIV to completely slide up or completely slide down. This is in milliseconds, so setting it to 500 means it’ll take half a second to complete the animation effect. This is fairly quick, so some people might want to increase and make it a bit slower.
var slideAniLen = 500;
Now, the next part of the JS file:
var timerID = new Array(); These are some variables we’ll use throughout the code below to keep track of our animations. We use arrays for each object to allow multiple animations to happen simultaneously. We’ll explain where each of these are used later on, but for now, simply paste them into your JS file.
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();
Now we’re getting to the actual functions. These first functions are what we call from our website itself. They essentially serve as the API for this mini-library.
function slidedown(objname){ This code adds the functions to call when requesting a DIV start sliding up or down. Let’s first look at the slideup() function. We pass it a single parameter- the DIV’s id (objname). The first line checks if the moving variable is set to true for that DIV, so we don’t begin animation on one that’s already moving. Once an animation starts, it will finish uninterrupted. If it is moving, on line 3, we return (exit from the function) so no further animation begins. The next line is a sanity checking if-statement. This function is beginning the slide down process of a DIV, and if a DIV’s display attribute is not set to none (not visible), we assume it’s already slid down and visible, so we can exit the function (abort the process), since there’s nothing else for us to do here. If those checks complete without any complications, we’re now ready to begin the sliding process, so we set the moving variable to true (so no other animation can start until we’re done), we set the direction variable to down (so it knows which way to move), and we call the function startslide(), which we’ll get to in a moment. The slideup() function is very similar, except it checks on the 3rd line inside that function to ensure the display property is not set to “none”, so the DIV is not visible, otherwise we have nothing to slide up, and we can abort the start slide process.
if(moving[objname])
return;
if(document.getElementById(objname).style.display != “none”)
return; // cannot slide down something that is already visible
moving[objname] = true;
dir[objname] = “down”;
startslide(objname);
}
function slideup(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display == “none”)
return; // cannot slide up something that is already hidden
moving[objname] = true;
dir[objname] = “up”;
startslide(objname);
}
Now, I hope you guys are hanging in there, we’re almost through the tricky parts.
The next function we’ll throw in the file is the startslide() function mentioned above:
function startslide(objname){ Okay, the last two functions were for making sure we really want to start the slide, and doing all the initial preparations. This function, startslide(), is where we actually begin the sliding process. We, as always, pass the DIV’s id (objname) that we’re working with as the function’s parameter. On the first line of this function, we set it in the obj[] array, so we can keep track of the id throughout the animation process. The next two lines set the endHeight to the original height (so we know where to start sliding from, or how far down to slide to), and the startTime, so we can keep track of how long this animation has been going on. Following this we have a nice three line if-statement that checks if we’re sliding down, and if we are, resizes the DIV’s height to 1px… a starting point to slide down from. Next it sets the object’s display attribute to “block”, making it visible (redundant if sliding up, but a good just-in-case measure never-the-less). Note: You might want to use “inline” instead of “block”, depending on your circumstances (inline will allow the DIV to have other content to the left and right of it, rather than adding a line break before and after it like block does), just be aware to change the other occurrences of “block” to “inline” if you do this. Finally the last line of the function is where we’ve set the initial timer, which will call the sliding function ever few milliseconds (depending on your settings of timerlen up top), and actually perform the animation itself.
obj[objname] = document.getElementById(objname);
endHeight[objname] = parseInt(obj[objname].style.height);
startTime[objname] = (new Date()).getTime();
if(dir[objname] == “down”){
obj[objname].style.height = “1px”;
}
obj[objname].style.display = “block”;
timerID[objname] = setInterval(’slidetick(” + objname + ”);’,timerlen);
}
Now, the function the above timer called was slidetick(), which is the next part of our motionpack.js file.
function slidetick(objname){ This function is what actually does the animation itself. The first line checks how long the animation has been in progress, by subtracting the animation’s start time from the current time. There’s then an if-statement that checks if the animation has exceeded the preset time (at the top of this file) for an animation’s length, and if so, it calls the endSlide() function, which cleans up (discussed below). If the elapsed time is not greater than the max time (the else-statement), it calculates the variable “d”. This calculation takes the ratio of time that’s progressed so far in the animation, and multiplies it by the final height of the DIV, so if half the time has progressed, for example, the variable d will contain half the height. Then it checks the direction, and if we’re sliding up, it alters d to it’s inflection… sliding the opposite direction (three quarters the way through the time would either be three quarters the way down if sliding down, or a quarter of the way from the top, if sliding up). Next we set the DIV’s height to “d” using it’s CSS style.height property.
var elapsed = (new Date()).getTime() - startTime[objname];
if (elapsed > slideAniLen)
endSlide(objname)
else {
var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
if(dir[objname] == “up”)
d = endHeight[objname] - d;
obj[objname].style.height = d + “px”;
}
return;
}
Now, the last function we’re needing in the motionpack.js file is the endSlide() function:
function endSlide(objname){ This is the function that’s called when the time runs out on an animation. It finishes everything and cleans up. The first line kills the animation timer, so it doesn’t keep trying to slide. The if-statement checks, and if it was sliding up, it hides the DIV by changing it’s display attribute to “none”. It readjusts the DIV’s height to the original height, so future animations will work fine on it. Then finally there are all those delete lines, deleting any array element we created to keep track of the different animations throughout the process. This cleans up a bit to ensure there are no memory leaks (for sites with lots of animations), etc. After this function is completed, the animation process is done.
clearInterval(timerID[objname]);
if(dir[objname] == “up”)
obj[objname].style.display = “none”;
obj[objname].style.height = endHeight[objname] + “px”;
delete(moving[objname]);
delete(timerID[objname]);
delete(startTime[objname]);
delete(endHeight[objname]);
delete(obj[objname]);
delete(dir[objname]);
return;
}
Now you can save that file, with all the pieces above saved up, and upload it to your webserver.
To download the entire above JS file, you can get it here.
Now, we have our entire mini-library done…. so how do we use it?
First we need to include it in our website. This is done by adding this quick line to your website on every page that you’re using the animation, preferably in the HEAD tag:
<script language="JavaScript" src="motionpack.js"></script> This code assumes the file you uploaded is named “motionpack.js” and is in the same folder as your website source code itself. Another common practice is to create a folder called js/ and put all your javascript include files there together, and in that case, you’d change the src tag above line to “js/motionpack.js”. Easy.
Now that page of your website has sliding abilities! But how do we use them?
First, let’s create a DIV, like we did with our last collapsible DIV tutorial:
<div id="mydiv" style="display:none; overflow:hidden; height:95px;"><h3>This is a test!<br>Can you see me?</h3></div> Notice we did make one change though. We added an “overflow: hidden” attribute and “height:95px” to the style property of the DIV. These property MUST be present on all DIVs you use for sliding. If you don’t include the overflow attribute, it’ll look very ugly, with text overlapping on other content and such. If you don’t include a static height here, it won’t know how far to slide, so it won’t work at all. Aside from that, it’s virtually the same. You can put whatever you want inside the div, just be sure to adjust the height accordingly.
The difference is this time our link calls functions from our library above. Here’s an example of what a Slide Down link might look like:
<a href="javascript:;" onmousedown="slidedown('mydiv');">Slide Down</a> Notice in the onmousedown function we call the slidedown() function from our above library. This will begin the animation and slide the DIV down, until it’s completely visible. You can replace slidedown() with slideup() to do just that, slide the DIV up.
As a challenge to you, try using what you’ve learned in this tutorial and the last to create a toggleSlide() function. It would be a simple if-statement to check if the link’s “display” property, and either slide it up or down, depending on it’s state. We did something very similar in the last tutorial, so try applying that here!
And finally, he’s a working example of it:
Hope this helps!
Edit: Due to a high number of requests, I’ve made a followup post explaining how to use this code in a one-click toggle situation: Toggle Sliding DIV
March 6th, 2007 at 6:01 am
Thats some nice work.
March 6th, 2007 at 7:08 am
Cool work
March 6th, 2007 at 8:46 am
I can’t get your examples (Slide Up, Slide Down links) to work with FireFox, but it works with IE. Do you know why? Great Tutorial Though..
March 6th, 2007 at 8:53 am
Nice one, it will be nice to wipe “mydiv” horizontal too
March 6th, 2007 at 9:05 am
Scott, what problem are you having in Firefox? I’m using Firefox 2.0 right now and the sliding seems to work fine.
Regards,
- Harry
March 6th, 2007 at 9:07 am
[...] Note, I’ve since made an updated post to this, with Digg comment style sliding animation included. Digg Article - Actual Link [...]
March 6th, 2007 at 9:58 am
[...] opciones adicionales tras enlaces que al ser pulsados muestran su contenido. En la página de Harry Maugans nos encontramos con un script que nos permitirá realizar este efecto haciendo visible el contenido [...]
March 6th, 2007 at 9:59 am
great job
March 6th, 2007 at 2:30 pm
How does display:none effect search engine optimization? Do search engines ignore content that is within a display:none div?
March 6th, 2007 at 3:25 pm
awesome
March 6th, 2007 at 3:25 pm
Really cool.
March 6th, 2007 at 3:25 pm
You might want to use unique IDs, from your front page your earlier example of a hidden div activates and deactivates the div in this example.
March 6th, 2007 at 3:25 pm
Thanks for sharing, I’ve been wanting to do something like this!
March 6th, 2007 at 3:27 pm
Sweet. Thanks for the tip. I commented yesterday, but will definatly be adding this as well.
March 6th, 2007 at 3:28 pm
Real nice that - well explained tutorial.
March 6th, 2007 at 3:30 pm
This is pretty neat. Thanks for taking the time to write it up!
March 6th, 2007 at 3:31 pm
Nice work, thanks for the share
March 6th, 2007 at 3:31 pm
im not using firefox 1.5 and its not working. but, like the other guy, it works in IE.
March 6th, 2007 at 3:32 pm
[...] 6, 2007 at 7:32 pm · Filed under Uncategorized How to Create Digg Comment Style Sliding DIVs with Javascript and CSS A great step-by-step tutorial on how to create a sliding DIV like Digg uses for burying comments. [...]
March 7th, 2007 at 2:43 am
Awesome!
March 7th, 2007 at 8:42 am
[...] read more [...]
March 7th, 2007 at 10:09 am
Have you done browser compatibility checks?
Which browsers will this not work with, and does the information default to visible?
March 7th, 2007 at 10:27 am
Wow this is so cool!
March 7th, 2007 at 11:52 am
Works fine for me in Firefox 2.0.0.2
March 7th, 2007 at 12:50 pm
i am liking the comment system.
March 7th, 2007 at 12:57 pm
It is cool
March 7th, 2007 at 2:09 pm
[...] ich mich den ganzen Tag mit Ajax rumgeärgert habe, poste ich jetz zum Ausgleich ein Tutorial von Harry Maugans über, dank Ajax-scripts, animierte sich auf- und zu-klappende [...]
March 7th, 2007 at 2:20 pm
[...] Harry Maugans » How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS I’ve coded a small Javascript library that will allow that functionality. It’s not meant to be a mootools or a script.aculo.us replacement… those are far more advanced libraries. (tags: css javascript webdesign div tutorial animation ui) [...]
March 7th, 2007 at 2:36 pm
Awesome! First js script tutorial I could understand! Thanks again for sharing.
March 7th, 2007 at 5:13 pm
Awesome!
March 7th, 2007 at 6:09 pm
Thanks.. That is very cool.
March 7th, 2007 at 8:21 pm
[...] Harry Maugans » How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS (tags: ajax) [...]
March 7th, 2007 at 11:56 pm
Cool.
Is there any way to use a dynamic height?
March 8th, 2007 at 6:54 am
I like the animation pattern, simple and effective. Could use some cross-browser comliancy, but the just of it is conveyed nicely.
March 8th, 2007 at 6:55 am
I like the animation pattern, simple and effective. Could use some cross-browser compliancy, but the just of it is conveyed nicely.
March 8th, 2007 at 2:54 pm
I am getting objname is undefined error in the error console. Anyone else running into a problem.
March 8th, 2007 at 4:14 pm
Fixed the error I had to add an extra escape character to line 257
out.print.ln(”timerID[objname] = setInterval(’slidetick(” + objname + ”);’,timerlen);”)
needed to be
out.println(” timerID[objname] = setInterval(’slidetick(” + objname + ”);’,timerlen);”);
March 9th, 2007 at 6:06 am
Great work it saved me a lot of headaches, Thanks!
I have added a fade effect to it , it fades AND slides in and out now: The new code is below
var timerlen = 5;
var slideAniLen = 250;
var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();
function slidedown(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display != “none”)
return; // cannot slide down something that is already visible
moving[objname] = true;
dir[objname] = “down”;
startslide(objname);
}
function slideup(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display == “none”)
return; // cannot slide up something that is already hidden
moving[objname] = true;
dir[objname] = “up”;
startslide(objname);
}
function startslide(objname){
obj[objname] = document.getElementById(objname);
endHeight[objname] = parseInt(obj[objname].style.height);
startTime[objname] = (new Date()).getTime();
if(dir[objname] == “down”){
obj[objname].style.height = “1px”;
}
obj[objname].style.display = “block”;
timerID[objname] = setInterval(’slidetick(” + objname + ”);’,timerlen);
}
function slidetick(objname){
var elapsed = (new Date()).getTime() - startTime[objname];
if (elapsed > slideAniLen)
endSlide(objname)
else {
var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
var f =elapsed / slideAniLen;
if(dir[objname] == “up”){
d = endHeight[objname] - d;
f = 1 - f;}
obj[objname].style.height = d + “px”;
obj[objname].style.opacity = f;
obj[objname].style.filter = ‘alpha(opacity=’+(f*100)+’)';
document.getElementById(’searchtextbox’).value=f;
}
return;
}
function endSlide(objname){
clearInterval(timerID[objname]);
if(dir[objname] == “up”){
obj[objname].style.display = “none”;
obj[objname].style.opacity = 0;
obj[objname].style.filter = ‘alpha(opacity=’+(0)+’)';
}
else{
obj[objname].style.opacity = 1;
obj[objname].style.filter = ”;
}
obj[objname].style.height = endHeight[objname] + “px”;
delete(moving[objname]);
delete(timerID[objname]);
delete(startTime[objname]);
delete(endHeight[objname]);
delete(obj[objname]);
delete(dir[objname]);
return;
}
you also need to add some stuff to the div
style=”display:none; overflow:hidden; height:9px;opacity:0.0;filter: alpha(opacity=0);”
March 9th, 2007 at 3:31 pm
[...] such as script.aculo.us. Firblitz posted a nice tutorial, which was initiated by an additional post from Harry [...]
March 9th, 2007 at 4:02 pm
[...] - How to Create Sliding, Collapsible Div An article outlining the steps to create a sliding, collapsible div with javascript and css. [...]
March 9th, 2007 at 6:54 pm
[...] read more | digg story [...]
March 9th, 2007 at 11:54 pm
Awesome, it works on firefox too….
March 10th, 2007 at 10:47 am
[...] Javascript ve CSS ile hazırlanmış güzel bir geçiş efektli açılır menü örneği anlatımı ve kodu. Link [...]
March 10th, 2007 at 2:37 pm
I saw your review on John Chow’s site today and wanted to know if you would be interested in a review. Please visit my site for for review exchange rules, let me know if you are interested in a review exchange.
http://jakeldaily.com/?p=42
:ppled fpr your email but did not see it, so decided to leave this in a comment
March 12th, 2007 at 6:59 am
Nice tutorial, only problem is the static height. Pain in the ass if you have dynamic content!
March 12th, 2007 at 3:20 pm
@ Dieter,
Do you know a way around that?
March 12th, 2007 at 8:36 pm
havnt you guys heard of AJAX?
March 13th, 2007 at 5:06 am
it works well but only only by specifying height of the div…..advice me…
March 13th, 2007 at 10:50 am
[...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
March 13th, 2007 at 11:26 am
nice, it works here in any browser.
thanx for sharing it,…
March 13th, 2007 at 5:01 pm
RE: dafin
Apparently you are a little confused yourself. This has nothing to do with AJAX (At all). It is used in conjunction with AJAX, but AJAX doesn’t do the animation. AJAX is a middle layer of communication between the client/server.
Now, prototype.js and scriptaculous do what you are speaking of, and are tied in with most RoR apps and AJAX apps - but they are not the same thing.
March 13th, 2007 at 6:07 pm
@hmaugans: No i don’t but if i find some spare time i’ll take a look at it.
March 13th, 2007 at 10:45 pm
Another thing to keep in mind is that if the user has javascript disabled, they’ll never be able to access the hidden content because the display: none is in the HTML. Better to set both the div’s initial and toggle states via javascript so that if js is disabled, the element will still be visible.
March 14th, 2007 at 3:38 am
Thanks for the tutorial. An easier implementation similar to the “Overlapping Content” script I used on this list -> http://www.mru.ug/index.php?option=weblinks&Itemid=60 Script from dynamic drive
March 14th, 2007 at 4:39 am
is there a way to slide horizontally ? left or right ?
March 14th, 2007 at 11:23 am
function slide(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display == “none”)
slidedown(objname);
else
slideup(objname);
}
Use this function to have a single function for sliding up/down
March 14th, 2007 at 11:58 am
Why not just use jQuery?
$(’#div’).fadeIn(speed).slideDown(speed);
Easy!
March 14th, 2007 at 3:03 pm
@Chris,
Read the comments in the Digg article. jQuery would work, but the purpose of this is to be lightweight, lean, and a learning experience.
March 15th, 2007 at 1:01 pm
[...] read more | digg story [...]
March 16th, 2007 at 6:46 am
Great example, really slick!
Just wondered about accessibility, does it work without a mouse?
March 17th, 2007 at 3:32 am
Nice tutorial!
March 17th, 2007 at 3:18 pm
Very Nice, This might encourage me to learn more
March 18th, 2007 at 3:38 pm
So how do you to the toggle slide then? maybe you should post a how to for that.
March 19th, 2007 at 12:24 am
[...] the heels of two very successful tutorials on creating a collapsible div and an animated sliding div, I’ve decided to write another. It seems my last few helped a number of programmers learn a [...]
March 19th, 2007 at 12:33 am
Coolio!
March 19th, 2007 at 1:08 am
very cool
March 19th, 2007 at 1:31 am
Good job
March 19th, 2007 at 3:54 am
@ Dieter & hmaugans
re: div height & dynamic content
Specify no height for the div to begin with & a style rule of display:none in the stylesheet, then load the dynamic content into the div (since the div is hidden, nothing will show), you can then read the div’s height and assign it to a variable.
e.g. something like this:
var theDiv = document.getElementById(’myDiv’);
var divHite = document.theDiv.scrollHeight;
theDiv.style.height= divHite;
Here’s a full jQuery example. (I know your intent was to show how to code it from start to finish with base javascript, I only provide this example because I recently used it on a site I was working on & hopefully it will convey my idea a bit better)
#ajax-div is given a css rule of display:none; in the stylesheet.
$(’.ajax-div-slide’).click(function() {
$(’#ajax-div’).load(this.href, function() {
var divHite = $(’#ajax-div’).height();
$(’#ajax-div’).height(0).css(”display”, “block”);
$(’#ajax-div’).animate({height: divHite},});
});
return false;
});
March 19th, 2007 at 7:26 am
function slide(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display == “none”)
slidedown(objname);
else
slideup(objname);
}
Where do i add that exactly and how do i call the function in a link? Could you explain please.
March 19th, 2007 at 3:26 pm
[...] How to create functions to slide DIVs up and down. It supports multiple animations happening simultaneously, as well as a variable animation length. It’s also time-based, rather than increment based, so it’ll animate the same speed on most computers. [go] [...]
March 19th, 2007 at 7:06 pm
Harry,
Sorry it took so long to respond. I wrote about 10 days ago that it wouldn’t work for me in Firefox. I wasn’t totally correct. It works for me on Firefox at home, but not at work? Both are versions 2.0.0.2. I don’t know, maybe its some setting I have… Any ideas. I’m glad I can finally see it now in Firefox!
Scott
March 19th, 2007 at 7:55 pm
@john:
just add that function to the motionpack.js file. change the function in the html to call slide().
watch the quotes around “none” in the new function when copying and pasting.
March 20th, 2007 at 3:21 am
[...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS (tags: css design programming tutorial) [...]
March 20th, 2007 at 6:54 am
@alternapop
Thanks for your help. Works now. I dont have any knowledge of Javascript so this entire thing puzzled me, works now though and looks very snazzy.
March 20th, 2007 at 6:56 am
Congrats John, and thanks alternapop!
March 20th, 2007 at 7:17 am
An easier way. Put this script in the page header
function show_hide(the_layer)
{
if(document.getElementById(the_layer))
{
if(document.getElementById(the_layer).style.display == ‘none’)
{
document.getElementById(the_layer).style.display = ‘inline’;
}
else
{
document.getElementById(the_layer).style.display = ‘none’;
}
}
}
and then in the page body put the following
Show/hide some text
This is the Text to show/hide.
The display:none will ensure that the text is hidden on page load.
If you have more than one div you want to show/hide then call them (say) foobar1 and foobar2 etc.
A working example is on my Agatha Christie web site. This has a list of the plots and solutions of all 66 of her full length novels. When viewing the plots the solution is hidden in a foobar div and can be shown/hidden by clicking the link. See it in action at http://www.gbtamc.co.uk/et/index.php?id=644
March 20th, 2007 at 7:22 am
Sorry. Here is the page code.
Show/hide some text
This is the text to show/hide
March 20th, 2007 at 7:28 am
The script
function show_hide(the_layer)
{
if(document.getElementById(the_layer))
{
if(document.getElementById(the_layer).style.display == 'none')
{
document.getElementById(the_layer).style.display = 'inline';
}
else
{
document.getElementById(the_layer).style.display = 'none';
}
}
}
The page details
Show/hide some text
The text to show/hide
March 20th, 2007 at 4:09 pm
Thank you for the tutorial. Good job. How would one toggle the show/hide to make it a + or - depending on the status of the divs visibility? Or say it was collapsed it would say “Show more… ” and if the div was visible it would instead say “Hide details”
March 20th, 2007 at 11:52 pm
Similar to what Tony is asking, how can you configure it so there is only one link instead of two? Click the link once to expand and click it again to close..
March 21st, 2007 at 9:25 am
Very useful, thanks
Exactly what I’ve been looking for.
March 23rd, 2007 at 6:11 am
Excelllent script man…
Works both in IE and FF.
thanx a lot… keep up the good work and write more scripts
March 23rd, 2007 at 3:48 pm
Awsome script, neat, short and easy to understand, not like other script that I have seen before looks very complicated. I am going to use it to hide and show login in form dynamically instead of reloading to another page.
March 24th, 2007 at 11:10 am
Anybody find a way to apply this to a single button? I messed around with it, but I’m not very DOM inclined. And from what I had, I thought it would change out the button once clicked, but it does not. I’d post up the code, but I don’t want to confuse anybody else who might read this later.
March 24th, 2007 at 11:52 am
[...] gotten quite a few comments on my recent post about creating a sliding, collapsible DIV, and while I like to leave some things unsaid, to be figured out by the reader… one question [...]
March 24th, 2007 at 11:53 am
Joe, and anyone else asking above. I just made a new post explaining how to do this with a single button (toggle):
http://www.harrymaugans.com/2007/03/24/one-click-toggle-for-sliding-animated-div/
March 25th, 2007 at 6:51 pm
1. Is there any way to use this with a few windows, where opening one would close the others? I’ve gotten it to work on two, but more than two won’t (possibly because I can’t use a list for the slideup function?).
2. Anyone know how to get this to degrade nicely for those who don’t have JavaScript enabled? I’ve seen it done:
http://webassist.com/professional/community/webproresource/masters/client_survey.asp
This one displays all of the divs if js is disabled, one at a time slides in if enabled…
Thanks in advance…
March 27th, 2007 at 7:52 am
I need same thing but left to right , what I have to do and I also want that fading in.
I can use alpha through css, but will that increase or decrease with java if yes then how?
March 27th, 2007 at 11:12 pm
[...] a sliding divs like you see on Digg or many other sites. It was written in response to another tutorial on implementing a similar [...]
March 29th, 2007 at 3:21 am
[...] entry by Harry Maugans is far and away one of the best examples of animated DIV tags that I’ve come [...]
March 29th, 2007 at 3:23 am
[...] entry by Harry Maugans is far and away one of the best examples of animated DIV tags that I’ve come [...]
March 31st, 2007 at 9:04 am
[...] Harry Maugans » How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS Solo eso. (tags: css javascript ajax) [...]
April 3rd, 2007 at 4:28 pm
Harry,
I can’t get the collapsible div to work on IE 6.0 — but it does work on Firefox?
Any fix?
April 5th, 2007 at 7:31 am
Hi there, firstly great little tutorial.
One bug, it doesn’t take into account div padding. Padding changes the viewers perspective of the div’s height and therefore the script should add the padding to the height.
Thanks, Daniel
April 5th, 2007 at 9:30 am
Hello Sir,
Really fond of the information and the quality of information that you have left on your site. I am really obliged by your wish to help people.
Regards,
zombie
April 6th, 2007 at 3:37 am
I guess browser compatibility is a large issue here. Here are the stats so far:
Firefox 1.5: Doesnt work (see comment by tont)
Firefox 2.0.0.3: Works (tested myself)
Internet Explorer 6.0: Doesnt work (see comment by boris)
Internet Explorer 7.0: Works (tested myself)
April 6th, 2007 at 7:44 pm
Would love to get some more details about dynamic height(s) :
As was mentioned :
var theDiv = document.getElementById(’myDiv’);
var divHite = document.theDiv.scrollHeight;
theDiv.style.height= divHite;
But not sure how to implement this…
April 8th, 2007 at 1:51 pm
Wouter,
I was able to get it to work on IE 6.0 by changing around my core stylesheets. There is a good change it had nothing to do with Harry’s code.
April 9th, 2007 at 8:41 am
Harry,
I’m trying to use your script but it’s just not quite working for me, I probably did something wrong but here’s where Im stuck at-
under the
My problem is that when the div is first toggled it slides the entire set height but then disappears almost instantly. When I click again, I get it slides down only to 1px. But when I set the
obj[objname].style.height = “1px”;
that is within the startslide() function to my specified height, it seems to work fine except for the fact that it jumps erratically when toggling down but the animation seems to be fine.
I know I’m not supposed to set it beyond 1px to prevent the erratic jump but it was one of the only things I found to actually display my div!
Do you have any idea what it might be?
April 10th, 2007 at 2:24 am
Great function, I’ve tried to make it a little neater on the vars it uses. I’ve made some big assumptions (ie. using .px but this regex can trim any dimension just change the regex?).
var timers = new Array();
function toggle(elementId){
element = document.getElementById(elementId);
if(element!=null&&timers[elementId]==null){
if(element.style.height.replace(”px”,”")>1){
timers[elementId] = setInterval(”shrink(’”+elementId+”‘)”,5);
}else{
timers[elementId] = setInterval(”grow(’”+elementId+”‘,400)”,5);
}
}
}
function shrink(elementId){
element = document.getElementById(elementId);
if(element!=null){
if(element.style.height.replace(”px”,”")(height-10)){
// clear timer
clearInterval(timers[elementId]);
element.style.height=height;
timers[elementId]=null;
}else{
element.style.height = Math.min(element.style.height.replace(”px”,”")-(-5),height);
}
}else{
clearInterval(timers[elementId]);
}
}
April 11th, 2007 at 12:04 pm
[...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS In this tutorial, we will create functions to slide DIVs up and down. It supports multiple animations happening simultaneously, as well as a variable animation length. It’s also time-based, rather than increment based, so it’ll animate the same speed on most computers; old computers won’t take 10 minutes for a DIV to slide down. [...]
April 11th, 2007 at 8:13 pm
Here is a prototyped version of the slider, with dynamic heights and automatic upsliding when 2 divs are attempted to be opened at the same time. Tested in Firefox2 and IE7. Hope you find it useful! Note that you will need to change your div style as well to:
var timerlen = 5;
var slideAniLen = 250;
var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();
function slidedown(objname){
if(moving[objname])
return;
if($(objname).style.height != “0px”)
return; // cannot slide down something that is already visible
$(objname).setStyle({’height’ : $(objname).scrollHeight + ‘px’});
moving[objname] = true;
dir[objname] = “down”;
startslide(objname);
}
function slideup(objname){
if(moving[objname])
return;
if($(objname).style.height == “0px”)
return; // cannot slide up something that is already hidden
moving[objname] = true;
dir[objname] = “up”;
startslide(objname);
}
function startslide(objname){
obj[objname] = $(objname);
endHeight[objname] = parseInt(obj[objname].style.height);
startTime[objname] = (new Date()).getTime();
if(dir[objname] == “down”){
obj[objname].style.height = “1px”;
}
timerID[objname] = setInterval(’slidetick(” + objname + ”);’,timerlen);
}
function slidetick(objname){
var elapsed = (new Date()).getTime() - startTime[objname];
if (elapsed > slideAniLen)
endSlide(objname)
else {
var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
if(dir[objname] == “up”)
d = endHeight[objname] - d;
obj[objname].style.height = d + “px”;
}
return;
}
function endSlide(objname){
clearInterval(timerID[objname]);
if(dir[objname] == “up”)
obj[objname].style.height = “0px”;
delete(moving[objname]);
delete(timerID[objname]);
delete(startTime[objname]);
delete(endHeight[objname]);
delete(obj[objname]);
delete(dir[objname]);
return;
}
function toggleSlide(objname){
if($(objname).style.height == “0px”){
// div is hidden, so let’s slide down
var questions = $(’questions’).getElementsByTagName(’div’);
var questions= $A(questions);
questions.each(function(question){
if(question.style.height != “0px”) slideup(question);
});
slidedown(objname);
}else{
// div is not hidden, so slide up
slideup(objname);
}
}
April 11th, 2007 at 8:15 pm
Sorry, the comment ate the div specifications, here it goes again…
<div id="mydiv" style="display:block; overflow: hidden; height: 0px;">
April 13th, 2007 at 10:57 am
Thanks Harry. First time reader here. I cam because of a comment you left on the digg site (http://digg.com/design/25_Code_Snippets_For_Web_Designers_2) admonishing some troller’s actions; I’m sure glad I did.
Your subscriber tally just got incremented by one!
April 13th, 2007 at 7:21 pm
[...] Harry Maugans » How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS In this tutorial, we will create functions to slide DIVs up and down. It supports multiple animations happening simultaneously, as well as a variable animation length. It’s also time-based, rather than increment based, so it’ll animate the same speed (tags: blog css design howto) [...]
April 13th, 2007 at 9:41 pm
[...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS nice DIV hiding effect using 1 toggle or 2 links, works in FF, IE6, and Opera 9.2 - read comments, exactly what I need for my side project! (tags: Collapsible) [...]
April 15th, 2007 at 3:31 am
Hey Harry, nice script.
Just thought I would let you know that you DON’T have to pre-set the height of the div. If you use the Prototype framework, you can use the ‘getHeight’ method, then you can get the height of the div that way. It’s great for divs with dynamic content.
Cheers!
April 15th, 2007 at 6:55 pm
Hi Harry,
Nice script. Thanks.
But I have a situation that I do not want to fix the size of my div. The height is determined at runtime, as it might contain some other elements also (I am developing in c# and will create my div at runtime, based on user option). In that case how to achieve this effect, because without height specified in the style element of the DIV, this script won’t work.
Cheers
April 16th, 2007 at 6:08 am
what should i put in the code to make it work in a php file.it works alone but in the wordpress index file stays dormant.thanks
April 17th, 2007 at 9:26 pm
[...] sliding boxes similar to what Digg uses for it’s comment system. The two more popular ones, How to Create Digg Comment Style Sliding DIVs with Javascript and CSS and Re: How to Create Digg Comment Style Sliding DIVs with Javascript and CSS, failed to take one [...]
April 18th, 2007 at 12:43 pm
[...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS In this tutorial, we will create functions to slide DIVs up and down. It supports multiple animations happening simultaneously, as well as a variable animation length. It’s also time-based, rather than increment based, so it’ll animate the same speed on most computers; old computers won’t take 10 minutes for a DIV to slide down. [...]
April 21st, 2007 at 11:12 am
I’ve been testing Kosta Krauth’s solution to an equivalent of Accordion. However, I’ve to plug-in prototype.js since it’s a prototype-version. Sadly, the codes don’t work. Even by rewriting to a dynamic height structure to Harry’s solution, that too didn’t work.
Any ideas to get Kosta’s solution to work?
April 22nd, 2007 at 12:03 am
ITs cool script but how can i make it one button that can open and close. istead of seprate two links to do that?
April 27th, 2007 at 11:59 am
[...] http://www.harrymaugans.com/2007/03/06/how-to-creat…; - Guide on How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
April 30th, 2007 at 2:48 am
不错的文章，非常感谢！
May 2nd, 2007 at 4:48 pm
This is pretty neat. Thanks for taking the time to write it up!!!
May 3rd, 2007 at 5:33 am
Great script, but do you know why it flashes once just before it totally dissapears in IE? In FF it isn’t flashing btw.
May 4th, 2007 at 11:37 am
Nice info - very well done.
I am trying to include a .swf element inside of the animated div element. The div animates its transitions in and out just fine - but the swf is not obscured(masked) by the sliding motion, and appears to exist on its own (higher up) z-index. Thus, when the div is sliding up, the swf actually is uneffected until the div is closed completely - then it disappears altogether.
Has anyone come across a work around for this (using a nested swf inside of the target div)
May 5th, 2007 at 8:16 am
So does anyone have a solution for using scrollHeight or any other method to set dynamic heights for each DIV? I’m 99% ready to go with this excellent script, but I’m missing that essential feature — setting heights manually is not an option. I’ve tried to understand how to implement it myself but I fail, miserably…
May 10th, 2007 at 1:57 pm
kk..tteessttiinngg
May 10th, 2007 at 5:17 pm
For those of you who want a SINGLE BUTTON for slide Up and Down
, simply type slideup(objname); in the slidedown function as shown;
function slidedown(objname){
…
if(document.getElementById(objname).style.display != “none”) {
slideup(objname);
return; // cannot slide down something that is already visible
}
…
}
and slidedown(objname); in the slideup function as shown;
function slideup(objname){
…
if(document.getElementById(objname).style.display == “none”) {
slidedown(objname);
return; // cannot slide up something that is already hidden
}
…
}
May 11th, 2007 at 11:51 am
[...] animated sliding boxes similar to what Digg uses for its comment system. The two more popular ones, How to Create Digg Comment Style Sliding DIVs with Javascript and CSS and Re: How to Create Digg Comment Style Sliding DIVs with Javascript and CSS, failed to take one [...]
May 14th, 2007 at 12:25 pm
Finally. I spent nearly all day on this, working with other similar scripts. I finally found how to do this with a dynamic DIV height (e.g. for generated content).
Just replace the original “startslide” method by the following:
function startslide(objname){
obj[objname] = document.getElementById(objname);
if(dir[objname] == “down”){
obj[objname].style.height = “1px”;
}
obj[objname].style.display = “block”;
startTime[objname] = (new Date()).getTime();
endHeight[objname] = obj[objname].scrollHeight;
timerID[objname] = setInterval(’slidetick(” + objname + ”);’,timerlen);
}
May 17th, 2007 at 5:57 am
Fantastic Script Harry - thank you for sharing.
Only one problem - When I use the script on a page that also contains a small FLASH element the flash disappears when I click on the Show or Hide links.
This only happens in IE.
The Flash is not in the collapsible DIVs.
Anyone any ideas? it is driving me mad!!
May 17th, 2007 at 6:07 am
Doh! Just solved it.
I am using SWFObject to display my Flash.
Updating to the new SWFObject V1.5 has fixed the clash!
May 18th, 2007 at 4:39 pm
[...] How to Create an Animated, Sliding, Collapsible DIV [...]
May 19th, 2007 at 4:23 pm
if the height isn’t directly specified in a css attribute, you may have problems when trying to resize the object.
replace the line
endHeight[objname] = parseInt(obj[objname].style.height);
with the lines
if(obj[objname].clientHeight != 0)
endHeight[objname] = obj[objname].clientHeight;
else
endHeight[objname] = parseInt(obj[objname].style.height);
for it to work properly
May 20th, 2007 at 12:54 pm
Thanks very much. I found it very useful and well explained. Nice one.
May 26th, 2007 at 7:23 am
[...] opciones adicionales tras enlaces que al ser pulsados se despliegan mostrando su contenido. Harry Maugans presenta un script que permite realizar este efecto haciendo visible el contenido a los robots y [...]
May 29th, 2007 at 5:49 am
so - did anyone find a solution for a horizontally scrolling version?
I hope so
May 29th, 2007 at 6:48 pm
Fantastic script Harry!! However I seem to have stumbled on a problem. I had no problems implementing this in either IE or FF, i started using a ToggleSlide() type function to make it one button up and down… still no probs. I can’t however get it to work in IE when calling the Javascript function from a flash movie/button, but it does still work in FF. Anybody got any ideas? Is this a known IE/Actionscript/Javascript bug that I don’t know of?!?
Thanks in advance,
Marc.
May 31st, 2007 at 4:36 am
coool
June 1st, 2007 at 4:19 am
First off, thanks so much Harry for this amazing script.
However, I tried Olivier Suritz’s suggested method of getting this to work with DIVs if varying heights, but it didn’t work at all when I tried his code!
Are there any other methods we can use to get this to respond to a DIV of any height, without entering it manually? Thanks so much!
June 4th, 2007 at 8:31 am
Really helped me a lot.
Thanks a lot.
Bye.
June 10th, 2007 at 4:18 am
Nice script, i was wondering… is there a way that the script determines the height itself (like when loading the data from database) we usually dont know the height of the div in that scenario. How about we use : offsetheight property
June 10th, 2007 at 4:30 am
if we write the function startslide(objname) like this, we dont even need to specify the height.
function startslide(objname){
obj[objname] = document.getElementById(objname);
obj[objname].style.display = “block”;
endHeight[objname] = parseInt(obj[objname].offsetHeight);
obj[objname].style.display = “none”;
startTime[objname] = (new Date()).getTime();
if(dir[objname] == “down”){
obj[objname].style.height = “1px”;
}
obj[objname].style.display = “block”;
timerID[objname] = setInterval(’slidetick(” + objname + ”);’,timerlen);
}
June 10th, 2007 at 7:05 am
[...] Animated sliding div [...]
June 10th, 2007 at 12:32 pm
Has anyone re-written this for cross browser compatability. I need it to funtion with IE6.
June 10th, 2007 at 6:22 pm
I second that!
Cross browser compat. is an important issue for me. I really appreciate the work that has been put into this, but I think that it will need to be fixed to work properly in all browsers. Then you can truly pat yourself on the back for all the work put into it!
June 13th, 2007 at 2:22 pm
Hey haxan,
Thanks for the post, but I gave it a try, but now my div won’t toggle at all
To clarify, it just keeps the Div hidden and the link does nothing
June 14th, 2007 at 7:15 am
ATTENTION all those that are trying to get Haxan or Olivier Suritz’s methods to work for DIVs with DYNAMIC HEIGHT.
I have just used their excellent rendition’s and the problem for me was the different quotes used in this blog - i.e. if you copy and paste, you must make sure that the single and double quotes are correctly formatted for your server.
Great work Harry - brilliant script. Soon to be in use at http://www.dogscandrive.com
June 14th, 2007 at 8:21 pm
Thanks Cole, but I tried that and it still doesn’t work
Maybe I’m just being an idiot; could someone please post how the entire script should look, with Cole’s /Olivier Suritz’s addition?
June 14th, 2007 at 9:13 pm
Hey Cole, I tried your idea, but it didn’t work
Can some please post the whole Javascript thing with the “dynamic” addition, as I can’t seem to make it work.
Thanks
June 16th, 2007 at 12:55 pm
Hi - using Olivier Suritz’s method sort of works - I have some expandable divs inside an expandable div (I have set the inner divs to visible instead of none so the outer div is the right size - the problem being if I collapse one of the inner divs then collapse the outer div and expand it again the outer div is no longer the correct size as the inner div is still ‘collapsed’ and thereore its size is not factored into the overall size of the outer div.
btw I did get it to work properly putting var d = “auto”; into slidetick instead but then you lose the animated effect.
ta
June 20th, 2007 at 9:21 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
June 21st, 2007 at 1:54 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
June 21st, 2007 at 2:55 am
Cool work..and it works fine in Firefox 2
June 21st, 2007 at 4:59 am
http://www.dogscandrive.com/musictest/bandtest/test-band/
is a demo of a future new page on my website. it uses the dynamic height div function.
i have put the javascript file at http://www.dogscandrive.com/wp-content/themes/default/js/slider2.txt - hopefully this should show any necessary corrections to the quotes problems that i originally noticed.
Features of my implementation are as follows:
- reduced the time for the slide to 1 (
var slideAniLenon line 2); this is because the div contains form elements which weren’t rendering well; most people can leave that at an appropriate number of milliseconds (150-500); sliding is now instant in my demo.- modified a line in the
startslidefunction to take into account the padding in my sliding div. i have a top & bottom padding of 20px; i hacked away and found that my correct is for 41px; if i had not updated this line, my div keeps growing every time i trigger the slide.endHeight[objname] = parseInt(obj[objname].offsetHeight) - 41;- my comments form submission button returns to the same page with the correct comments div already open; this is done by passing a php variable which you can see in the url.
Hope all that is helpful. Any further questions just ask. you can contact me directly at rcolchester atttttt googlemail dotttt com
June 21st, 2007 at 5:01 am
my website (click on my name) is a demo of a future new page on my website. it uses the dynamic height div function.
i have put the javascript file at http://www.dogscandrive.com/wp-content/themes/default/js/slider2.txt - hopefully this should show any necessary corrections to the quotes problems that i originally noticed.
Features of my implementation are as follows:
- reduced the time for the slide to 1 (
var slideAniLenon line 2); this is because the div contains form elements which weren’t rendering well; most people can leave that at an appropriate number of milliseconds (150-500); sliding is now instant in my demo.- modified a line in the
startslidefunction to take into account the padding in my sliding div. i have a top & bottom padding of 20px; i hacked away and found that my correct is for 41px; if i had not updated this line, my div keeps growing every time i trigger the slide.endHeight[objname] = parseInt(obj[objname].offsetHeight) - 41;- my comments form submission button returns to the same page with the correct comments div already open; this is done by passing a php variable which you can see in the url.
Hope all that is helpful. Any further questions just ask. you can contact me directly at rcolchester atttttt googlemail dotttt com
June 21st, 2007 at 5:31 am
http://www.dogscandrive.com/musictest/bandtest/test-band/
is a demo of a future new page on my website. it uses the dynamic height div function.
i have put the javascript file at http://www.dogscandrive.com/wp-content/themes/default/js/slider2.txt - hopefully this should show any necessary corrections to the quotes problems that i originally noticed.
Features of my implementation are as follows:
- reduced the time for the slide to 1 (
var slideAniLenon line 2); this is because the div contains form elements which weren’t rendering well; most people can leave that at an appropriate number of milliseconds (150-500); sliding is now instant in my demo.- modified a line in the
startslidefunction to take into account the padding in my sliding div. i have a top & bottom padding of 20px; i hacked away and found that my correct is for 41px; if i had not updated this line, my div keeps growing every time i trigger the slide.endHeight[objname] = parseInt(obj[objname].offsetHeight) - 41;- my comments form submission button returns to the same page with the correct comments div already open; this is done by passing a php variable which you can see in the url.
Hope all that is helpful. Any further questions just ask.
June 21st, 2007 at 7:59 am
[...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS In this tutorial, we will create functions to slide DIVs up and down. It supports multiple animations happening simultaneously, as well as a variable animation length. (tags: ajax tutorial css webdesign javascript menu effects script design collapsible menus) [...]
June 22nd, 2007 at 2:07 am
hi!….
i have made a little modification to the script…
this turn the animation “lineal” to “exponential”….. i mean…. the graphic of the animation its lineal:
y = elapsed / slideAniLen * endHeight[objname]
the variable is “elapsed / slideAniLen” (the time factor is variable, but only changues ‘elapsed’, but this must to increase from zero to 1
this means a lineal animation formula:
y = (elapsed / slideAniLen) * endHeight[objname]
y = (x/a) * m // just simplyfing…replacing (x/a its variable…. i will call it ‘x’)
y = x * m // lineal formula
in the scrpit i made uses:
y = m * x^f // f = factor // this makes a “curved” animation
m = acceleration = (endHeight[objname]) // acceleration is constant
// sorry for the annoying phisics =)
this make the acceleration increase when the end Height is large…
final formula:
y = m * x^f // replacing
y = (endHeight[objname]) * (elapsed / slideAniLen)^factor
factor normally its ‘2′, but if u want a retarded and sticky animation effect, u can use the factor u want (just try…. higher than 1, makes a retarded animation, lower than 1 (not lower than zero), makes a accelerated animation, but slower at the end)
Making this in the script:
****************************************
function slidetick(objname){
var elapsed = (new Date()).getTime() - startTime[objname];
if (elapsed > slideAniLen)
endSlide(objname)
else {
var timeratio = (elapsed / slideAniLen);
timeratio = Math.pow(timeratio,factor);
var d =Math.round( timeratio * endHeight[objname]);
if(dir[objname] == “up”)
d = endHeight[objname] - d;
obj[objname].style.height = d + “px”;
}
return;
}
*******************************// i dont know how to send code
u.u
as you see….. there is a ‘factor’ variable, u can replace it by the number u want, or (better), u can declare it as a initial variable with the others for simply modification of the behaviour of the scrpit:
var timerlen = 5;
var slideAniLen = 500;
var factor = 2;
and ther U got it!!!
use several values for factor, and see the results on animation!
values go from 0 and positives (real numbers… decimals)
try this factors!
var factor = 0; // no animation (last script behaviour)
var factor = 1; // normal animation (lineal, this script)
var factor = 2; // accelerated animation (retarded)
var factor = 3; // fast (i use this)
var factor = 0.5 // fast animation, but slower at the end (nice effect! =) )
just try!!!
bye!!!!
JoeX
June 22nd, 2007 at 12:53 pm
WoW… gr8 tutorial, im in the process of redesigning my site and will be using a variation of this script, comming from a pure css background, ive only just started realising to power of javascript.
I need a mod for this script:-
1)an expand all divs
2)a switch between div, ie open one close the other, ive 3 divs im working with
Cheers
Doo
June 25th, 2007 at 10:35 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
June 25th, 2007 at 12:30 pm
This is great!
One questiong though, has anyone found a way to expand the div from the “middle” out?
June 25th, 2007 at 1:20 pm
Sorry - for the second post but if expanding the div from the middle isn’t possible, is there a way to expand the div so it opens up instead of sliding down?
I would love for this to be able to open above a link and slide upwards to reveal the content.
Many, many thanks in advance!
June 25th, 2007 at 3:52 pm
One more question - sorry for the split post! - assuming that animating the div so that is widens from the middle out isn’t possible, how would I reverse the animation so that when placed above a link it displays the content by sliding up?
June 26th, 2007 at 6:54 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
June 28th, 2007 at 8:26 am
Woow! Excellent work! Love you!
July 3rd, 2007 at 9:27 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
July 6th, 2007 at 7:37 am
[...] Website. [...]
July 6th, 2007 at 6:20 pm
Nice tutorial, I’m just hoping to see more of this on the web.
Another similar approach can be found at http://www.xtractpro.com/articles/Animated-Collapsible-Panel.aspx , for a panel with optional collapsing and navigation.
July 7th, 2007 at 12:21 am
This is very good work, i’m already trying to implement this functionality on one of my websites. Thanks much for this.
July 9th, 2007 at 5:53 am
We tried implementing this, works great on firefox but on IE, if someone clicks the slider before the entire page loads, the rest of the page just stops loading. Images dont load after someone toggles the slider. Anyone know how to work around this?
ps. great script
July 9th, 2007 at 11:02 am
I like it, but tell me, it works in all popular browsers?
July 10th, 2007 at 4:36 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
July 17th, 2007 at 9:28 pm
Very good site. You are doing a great job. Please keep it up!
July 21st, 2007 at 2:28 am
[...] a nice blog entry on how to make sliding DIVs using Javascript and CSS from scratch without having the overhead of [...]
July 24th, 2007 at 2:45 pm
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
July 24th, 2007 at 7:15 pm
I have changed my sites since I found your blog. Keep up the good work.
July 25th, 2007 at 3:50 am
Awesome little trick. Adds a touch of fun to a website, without overwhelming. I think a lot of people out there today are adding far too many bells and whistles, but something small and distinctive like this adds a perfect touch. Also kudos to you for being so responsive to suggestions that you’ve received about it. The web offers such fantastic opportunities to both foster cooperative communities and get free help on improving your own work. Still, not everyone takes the time to allow this kind of collaboration to occur, and certainly there are lots of blogs where, even if the poster does take suggestions into account, he doesn’t actually expend the time and energy to post follow up comments detailing progress. Just curious — what would be the effect of creating a double slide, or is that possible?
July 31st, 2007 at 2:24 pm
Hi all,
Just wanted to say (further to my sudden influx of posts earlier in this thread) that your sliding divs are brilliant.
My site (which has been undergoing renovation) is now up and running at http://www.dogscandrive.com. You can see your sliding divs (with dynamic height, sliding up and down etc) in action on any artist’s page [note to all: my sliding is so quick you don't actually notice it - if anyone ever gets it working with form elements - please let me know!!!!!].
Feel free to listen to a couple of tracks and rate them while you’re there! Thanks again.
Cole.
July 31st, 2007 at 10:10 pm
Cole, how you get it to work with dynamic height? Also it looks like you got it working with form elements…
August 2nd, 2007 at 6:43 pm
Never mind I got it working with dynamic height.
August 2nd, 2007 at 7:29 pm
Never mind, I got it to work dynamically. Thanks for the awesome script!
August 5th, 2007 at 3:13 pm
Excellent! I used Cole’s version, and it works like a charm. 2 Questions:
1. Is there any way for users who have javascript disabled to see the (collapsed) content? As in, can the divs be in an expanded state by default if js is disabled?
2. What does this function do?
function commentstoggle(objname){
var f=1;
for (f=1;f
August 5th, 2007 at 3:34 pm
sorry, my comment got cut off…
I assume the ‘commentstoggle’ function will collapse the comments if they reach a certain number, but is the number 30 some sort of variable?
For the Accessibility issue, here is a related script, for tabbed divs. He uses CSS to hide the content instead of display:none.
http://blog.mozmonkey.com/2007/semantic-tab-box-v20/
Thanks for any help.
August 6th, 2007 at 5:38 pm
Are we free to use this script whereever, or are there restrictions? Thanks!
August 7th, 2007 at 4:28 am
Awesome script, i successfully got it working with dynamic heights, but only with inline content: it seems that AJAX calls are not supported…
my test page performs AHAH in order to include dynamic content in the div, but the div doesn’t slide to fit its *new* height.
The jQuery example, submitted in these comments by Yansky, could suggest me some workaround, but i still can’t find a solution without using this overweighted library. Any idea?
August 10th, 2007 at 8:23 am
Fantastic script m8, cheers for da tut.
August 10th, 2007 at 10:00 am
I love it except if you select all and then copy it still copies the hidden text. Is there anyway to fix that?
August 12th, 2007 at 10:23 pm
asdasdsadsadasasd
August 13th, 2007 at 4:14 pm
Thanks for the tutorial. CSS made my site better.
August 14th, 2007 at 4:30 am
Thanks a tonne, this is exactly what I was looking for, made things a lot easier and saved me a tonne of time
August 16th, 2007 at 9:53 pm
Hi,
I’m having a problem trying to make the script to work in Firefox.. It works in IE… So, if you could email me with some answers… That would be great!
August 22nd, 2007 at 6:17 am
Interesting. I gave this as an exercise/project to my students. Although not all of them got the correct result, everybody loved this activity. I can’t wait to see your next post.
August 22nd, 2007 at 2:40 pm
Harry,
Great tutorial. This is just what I was looking for. I do have one suggestion for you on a feature that would be great for script. Timed slide up. For instance the user would click a link to show the div, then after a variable amout of time it would hide again. Is this possible with this script. If so, what would be the best way to go about it?
Thanks again for the great script.
August 25th, 2007 at 1:21 pm
[...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
August 26th, 2007 at 9:30 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
August 27th, 2007 at 12:47 pm
Awesome work Olivier Suritz on the changes to the StartSlide() method for dynamic divs.
Thanks
August 27th, 2007 at 7:53 pm
Gayrimenkul ilan portalı sahibinden ve emlakçıdan satılık kiralık ev konut daire işyeri dükkan ofis plaza arsa arazi villa bina yazlık ilanlarınızı üç dilde yayınlamaktadır. Beşiktaş, levent, etiler, tarabya, ulus, emirgan, teşvikiye, nişantaşı, şişli, mecidiyeköy, Gayrettepe,kiralık daire satılık konut konutlar, balmumcu,dikilitaş,ortaköy ev
August 29th, 2007 at 11:31 am
[...] http://themes.wordpress.net/columns/3-columns/704/wp-andreas01-12/ http://www.harrymaugans.com/2007/03/06/how-to-create-an-animated-sliding-collapsible-div-with-javasc... http://www.kineda.com/akon/ [...]
September 1st, 2007 at 8:15 pm
In response to Kosta’s idea for ‘dynamic heights and automatic up-sliding when 2 divs are attempted to be opened at the same time’ and Jason’s request for some input.
I have created a ‘quick and dirty hack’ to make it possible. (tested ie6+, ff1.5+)
FIRST: Use this replacement (as suggested above me) of the SlideStart:
function startslide(objname){
obj[objname] = document.getElementById(objname);
obj[objname].style.display = “block”;
endHeight[objname] = parseInt(obj[objname].offsetHeight);
obj[objname].style.display = “none”;
startTime[objname] = (new Date()).getTime();
if(dir[objname] == “down”){
obj[objname].style.height = “1px”;
}
obj[objname].style.display = “block”;
timerID[objname] = setInterval(’slidetick(” + objname + ”);’,timerlen);
}
SECOND: Add this new function in the js file:
function updateHeight(tagname) {
var myDiv = document.getElementById(tagname);
var divHeight = myDiv.scrollHeight;
myDiv.style.height = ‘auto’;
}
THIRD: Modify your ToggleSlide with an extra passing parameter
function toggleSlide(objname, prevobj){
slideVal = prevobj;
…
FOURTH: Modify your call to ToggleSlide(), and include a second parameter (the parent’s id.
ToggleSlide(’divId’,'parentDivId’);
That should work! Basically it just manually updates the div’s true height according to the scrollHeight (sorry opera users!) after every toggle action.
September 1st, 2007 at 8:17 pm
I forgot to add…
FIFTH: You must call the function after endSlide is complete (to make sure we have our true height.
At the bottom of endSlide, add:
if (slideVal != null)
updateHeight(slideVal);
before the ‘return;’
September 5th, 2007 at 3:37 pm
Eurolingua Übersetzungen
Wir übersetzen in sämtlichen Sprachkombinationen und auf allen Fachgebieten kompetent, zuverlässig und zügig. Wir bieten Übersetzungen, die nicht nur „brauchbar“, sondern exzellent sind und verfügen über ein QM-system des MPA NRW nach DIN EN ISO 9000:2000. Übersetzungen nach der norm DIN EN 15038:2000 – Auch für Sie
September 9th, 2007 at 4:44 pm
[...] web: http://www.harrymaugans.com Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]
September 17th, 2007 at 5:45 am
Great tutorial. This is just what I was looking for.
Thank you.
September 17th, 2007 at 3:03 pm
Made some mods to the regular download version to be able to do this sideways. I didn’t end up using this in my stuff, but maybe somebody else will want it.
var timerlen = 3;
var slideAniLen = 250;
var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();
var endWidth = new Array();
function slidedown(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display != “none”)
return; // cannot slide down something that is already visible
moving[objname] = true;
dir[objname] = “down”;
startslide(objname, “down”);
}
function slideup(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display == “none”)
return; // cannot slide up something that is already hidden
moving[objname] = true;
dir[objname] = “up”;
startslide(objname, “up”);
}
function slideleft(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display != “none”)
return; // cannot slide down something that is already visible
moving[objname] = true;
dir[objname] = “left”;
startslide(objname, “left”);
}
function slideright(objname){
if(moving[objname])
return;
if(document.getElementById(objname).style.display == “none”)
return; // cannot slide up something that is already hidden
moving[objname] = true;
dir[objname] = “right”;
startslide(objname, “right”);
}
function startslide(objname, direction){
obj[objname] = document.getElementById(objname);
if(direction == “up” || direction == “down”)
{
endHeight[objname] = parseInt(obj[objname].style.height);
startTime[objname] = (new Date()).getTime();
if(dir[objname] == “down”){
obj[objname].style.height = “1px”;
}
obj[objname].style.display = “block”;
timerID[objname] = setInterval(’slidetick(” + objname + ”,’vert’);’,timerlen);
}
else
{
endWidth[objname] = parseInt(obj[objname].style.width);
startTime[objname] = (new Date()).getTime();
if(dir[objname] == “left”){
obj[objname].style.width = “1px”;
}
obj[objname].style.display = “block”;
timerID[objname] = setInterval(’slidetick(” + objname + ”,’horiz’);’,timerlen);
}
}
function slidetick(objname, direction){
var elapsed = (new Date()).getTime() - startTime[objname];
if(direction == “vert”)
{
if (elapsed > slideAniLen)
endSlide(objname)
else {
var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
if(dir[objname] == “up”)
d = endHeight[objname] - d;
obj[objname].style.height = d + “px”;
}
}
else
{
if (elapsed > slideAniLen)
endSlide2(objname)
else {
var d =Math.round(elapsed / slideAniLen * endWidth[objname]);
if(dir[objname] == “right”)
d = endWidth[objname] - d;
obj[objname].style.width = d + “px”;
}
}
return;
}
function endSlide(objname){
clearInterval(timerID[objname]);
if(dir[objname] == “up”)
obj[objname].style.display = “none”;
obj[objname].style.height = endHeight[objname] + “px”;
delete(moving[objname]);
delete(timerID[objname]);
delete(startTime[objname]);
delete(endHeight[objname]);
delete(obj[objname]);
delete(dir[objname]);
delete(endWidth[objname]);
return;
}
function toggleSlide(objname){
if(document.getElementById(objname).style.display == “none”){
// div is hidden, so let’s slide down
slidedown(objname);
}else{
// div is not hidden, so slide up
slideup(objname);
}
}
function toggleSlide2(objname){
if(document.getElementById(objname).style.display == “none”){
// div is hidden, so let’s slide down
slideleft(objname);
}else{
// div is not hidden, so slide up
slideright(objname);
}
}
September 18th, 2007 at 3:31 am
Thanks for the tutorial.It helps me a lot…
September 18th, 2007 at 7:37 pm
i’m already trying to implement this functionality on one of my websites. Thanks much for this.
September 20th, 2007 at 10:30 am
I can’t get Slide Up, Slide Down links to work with FireFox. Do you know why?
Well Nice Tutorial Though
http://www.genesis-ccs.com
September 21st, 2007 at 8:55 am
i have some content i wish use this on, however i will not know how much height to set on the div as the content is loaded dynamically. Is there anyway around this?
September 23rd, 2007 at 6:41 am
Great site ! I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings…
September 23rd, 2007 at 8:02 am
I can’t get the ONE-BUTTON-SOLUTION to work, could someone post the motionpack.js code including the ONE-BUTTON-SOLUTION here please!
September 23rd, 2007 at 11:38 am
thx for the great stuff, saved it ;P
September 23rd, 2007 at 11:29 pm
Great site ! I really enjoyed reading all of your posts.
It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more.
So please keep up the great work.
Greetings…
September 24th, 2007 at 5:38 am
Hi,
I tried to put this menu on my website http://www.genesis-ccs.com but i cant manage to use this for flash file…
September 24th, 2007 at 7:19 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
September 27th, 2007 at 3:07 am
[...] read more | digg story [...]
September 28th, 2007 at 12:20 pm
Thanks, this helped a lot!
September 28th, 2007 at 5:00 pm
i love this tutorial but im confused on how to create a nav menu out of this.. i want a nice animated dropdown menu.. using JS.. this link demonstrates what im trying to accomplish.. check out this company’s menu http://www.ciplex.com/branding.html
can anyone just explain maybe in the html what script i need to put to line a few of these toggles up?
thanks
October 2nd, 2007 at 8:03 pm
very good
October 3rd, 2007 at 8:19 am
thanks
October 4th, 2007 at 3:27 am
[...] read more | digg story [...]
October 6th, 2007 at 12:47 pm
cool
October 9th, 2007 at 12:53 pm
love this tutorial but im confused on how to create a nav menu out of this.. i want a nice animated dropdown menu.. using JS.. this link demonstrates what im trying to accomplish.
October 9th, 2007 at 12:55 pm
thank you good
October 10th, 2007 at 4:48 am
[...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS » This Summary is from an article posted at Harry Maugans on Wednesday, October 10, 2007 Well, [...]
October 10th, 2007 at 7:56 pm
sohbet
October 10th, 2007 at 7:56 pm
thankss
October 12th, 2007 at 5:52 am
thanks :))
October 13th, 2007 at 1:38 pm
thanks for artichlee
October 13th, 2007 at 2:03 pm
tahnksss
October 15th, 2007 at 6:51 am
very Intresting article
October 15th, 2007 at 5:49 pm
thanx for article
October 15th, 2007 at 6:50 pm
great job
thanx all
October 15th, 2007 at 10:08 pm
thanks for artichlee
October 16th, 2007 at 9:13 am
thanksss
October 16th, 2007 at 12:03 pm
But if you read what I mentioned about separating out your content from your Flash movies and putting it into a database or external xml files, you’ll be able to use that same content to generate the HTML version of the site Very Good Site…
October 17th, 2007 at 1:34 am
Thanks very much! Love your work!
October 17th, 2007 at 6:56 am
Thanks for the article verry informative and usefull to me
October 17th, 2007 at 9:57 am
thanks very good
October 18th, 2007 at 8:23 pm
I followed it all the way through and the code didn’t work. Is there something I’m missing?
October 19th, 2007 at 11:14 am
Trying to do a multiple slide effect in a box … how can i manage to close an allready open slider if any ?
October 19th, 2007 at 11:31 am
this is a great writeup, definitely a very, very good system.
October 19th, 2007 at 12:00 pm
Sorry it took so long to respond. I wrote about 10 days ago that it wouldn’t work for me in Firefox. I wasn’t totally correct. It works for me on Firefox at home, but not at work? Both are versions 2.0.0.2. I don’t know, maybe its some setting I have… Any ideas. I’m glad I can finally see it now in Firefox!
October 19th, 2007 at 1:31 pm
Thanks a ton, this is great stuff. I modified the code to allow me to specify the direction of the slide in the anchor…still just a minor mod of your work. Thanks again!
October 19th, 2007 at 7:59 pm
Thanks a ton, this is great stuff. I modified the code to allow me to specify the direction of the slide in the anchor…still just a minor mod of your work. Thanks again!
October 20th, 2007 at 8:37 am
Now, the next part of the JS file:
var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();
oh yeahhh
thank you
October 21st, 2007 at 3:22 am
[...] DIVs with Javascript and CSS 67. How to Create a Collapsible DIV with Javascript and CSS 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS 69. AJAX Shopcart 70. Draggable content 71. Dragable RSS boxes 72. AJAX Pull Down Effect: Rico [...]
October 21st, 2007 at 11:23 am
I find this post very informative and interesting. I will try to use this on my site. Thanks for the great post.
October 21st, 2007 at 1:58 pm
thanks you comment
October 22nd, 2007 at 3:41 am
Thanks great job
October 22nd, 2007 at 1:30 pm
thanksss
its nice
best regards
October 22nd, 2007 at 2:15 pm
thank you very much…
October 23rd, 2007 at 3:10 am
Thanks for stuff.I was looking at the material over a large amount of time
October 23rd, 2007 at 3:27 am
thank youu…..
October 23rd, 2007 at 3:31 am
is a demo of a future new page on my website. it uses the dynamic height div function.
October 23rd, 2007 at 3:47 am
thanksss
its nice
best regards
October 23rd, 2007 at 5:03 am
thanks…
October 23rd, 2007 at 6:53 am
thanks
October 23rd, 2007 at 7:49 am
Movie World Video
October 23rd, 2007 at 8:46 am
discus
akvaryum
October 23rd, 2007 at 6:09 pm
thank you….
October 24th, 2007 at 8:54 am
Thanks for this informations. yararli bilgiler icin cok tesekkurler. (escuse me my english is bad.)
October 24th, 2007 at 8:57 am
Thanks for this information.
October 24th, 2007 at 3:40 pm
very nice
Thx :-))))))))
October 24th, 2007 at 5:01 pm
thanx
October 25th, 2007 at 5:08 pm
Thank you for this fine article
October 26th, 2007 at 1:22 pm
thanks…
October 26th, 2007 at 3:16 pm
thanx
October 26th, 2007 at 6:51 pm
Thanks, this helped a lot! see you
October 27th, 2007 at 11:06 am
International Song & Lyrics Archive - International Song & Lyrics Archive
October 28th, 2007 at 6:46 pm
chat
October 29th, 2007 at 11:59 am
thans. very intresting article.
October 29th, 2007 at 12:01 pm
thanks
October 29th, 2007 at 3:50 pm
greet , awesome
October 29th, 2007 at 10:04 pm
thnak.s
October 30th, 2007 at 4:25 pm
thanks very good
October 31st, 2007 at 4:17 am
with css 2.0 or other version ?
November 1st, 2007 at 11:36 am
thank you very much…
November 1st, 2007 at 11:38 am
with css 2.0 or other version ?
November 1st, 2007 at 11:46 am
thanks very good
November 1st, 2007 at 5:43 pm
i really like this tutorial… one question how can i reuse it? i would like to use this on multiple navigation items. do i have to rewrite this code if i want to use its functionality 5 times???
November 1st, 2007 at 6:08 pm
very nice
November 1st, 2007 at 6:11 pm
Never mind I got it working with dynamic height.
November 1st, 2007 at 8:44 pm
thankss
November 2nd, 2007 at 2:59 pm
thanks all
November 3rd, 2007 at 12:25 am
[...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS (tags: css howto html javascript tutorial website) [...]
November 3rd, 2007 at 12:36 am
“Never mind I got it working with dynamic height.” said online
online why never ?
November 3rd, 2007 at 12:41 am
why not carlos
November 3rd, 2007 at 7:03 am
thanks..
November 3rd, 2007 at 1:31 pm
I thought answers and google talk should get more traffic..
November 4th, 2007 at 10:55 am
Do search engines ignore content that is within a display:none div?
November 4th, 2007 at 6:24 pm
good article
thanks
November 5th, 2007 at 8:08 am
Thanks for informations.
November 5th, 2007 at 9:51 pm
thank
November 6th, 2007 at 9:14 am
Thank you..
November 6th, 2007 at 9:14 am
wowww thanks
November 6th, 2007 at 9:16 am
Ty very much !
November 6th, 2007 at 11:46 am
Thanks all informations.
November 6th, 2007 at 6:13 pm
I have always wanted to do this, but I stink at JS ( even though I am a pretty hard core PHP coder :S )
Great work!
November 7th, 2007 at 7:19 am
thanks
November 7th, 2007 at 12:46 pm
thanks best site
November 7th, 2007 at 12:47 pm
thanks best site
November 7th, 2007 at 1:15 pm
thanks this will come in really usefull
November 7th, 2007 at 2:37 pm
thank youu
November 7th, 2007 at 2:38 pm
thank youudd
November 7th, 2007 at 2:39 pm
thank youudd
November 7th, 2007 at 2:43 pm
I read it and i think you right.
November 7th, 2007 at 6:24 pm
hanks this will come in really
November 8th, 2007 at 3:15 am
Hi,
This is realy great, i’m already trying to implement this functionality on one of my websites.
Thanks, It saved a lot of time.
November 8th, 2007 at 12:51 pm
I got this working on my site with the fading. I haven’t released the code yet, but I will by the end of the week. There is a bug in the previously posted code where he uses ’searchtextbox’ for a parameter instead of objname, so you’ll need to change that. Also change slideAniLen to 1000.
It works great, and the toggle is a simple thing.
November 8th, 2007 at 5:56 pm
thanks for all apologies and articles. best regards
November 9th, 2007 at 12:06 pm
Real nice that - well explained tutorial.
November 9th, 2007 at 12:07 pm
I read it and i think you right.
November 10th, 2007 at 11:05 am
thanks
November 10th, 2007 at 4:52 pm
oh thank u very much for this article
November 10th, 2007 at 4:55 pm
oh thanks a lot
November 10th, 2007 at 5:02 pm
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
November 10th, 2007 at 5:18 pm
thanks
November 10th, 2007 at 5:20 pm
thanks you
November 11th, 2007 at 12:48 pm
Bedava Oyunlar
November 11th, 2007 at 1:25 pm
Nice script.. thanks
i looking for Sliding Collapsible like yahoo menu button, its so hard.
November 11th, 2007 at 1:30 pm
thx for the great plugin! very useful … keep up your nice work
November 11th, 2007 at 1:31 pm
thx for the great information very useful … keep up your nice work
November 11th, 2007 at 5:39 pm
thanx for artichle
November 12th, 2007 at 5:49 pm
Barbie oyunları
November 13th, 2007 at 6:03 am
Cool work…..I thought this work requires some advanced-scripting knowledge…!!!…helped me a lot understand it easily
November 13th, 2007 at 11:17 am
This is just what I was searching for… thanks very much
November 13th, 2007 at 3:51 pm
Thanks you
November 13th, 2007 at 3:52 pm
thanks
November 13th, 2007 at 3:52 pm
thansk you
November 13th, 2007 at 3:52 pm
thansk …
November 13th, 2007 at 3:53 pm
tahnsks
November 13th, 2007 at 3:53 pm
tahnsk yo
November 13th, 2007 at 5:25 pm
Thanks so much for this! I am respectfully borrowing it to use on a new site I’m working on - I’m just learning javascript and this is tremendously helpful!
Thanks,
~liquid06
November 14th, 2007 at 5:23 am
Thanks…
November 15th, 2007 at 1:07 am
[...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS is a great programming-for-dummies style tutorial on how to create an animated sliding DIV using Javascript. I don’t understand how it got over 1,800 DIGGs since it’s such a simple Javasscript. My only guess is that there are a lot of people are now interested in learning Javascript because of the proliferation of web 2.0 and AJAX. Learn the basic from scratch is always a good way to start. Unfortunately, the tutorial doesn’t address the fundments of Javascript on how and why it works that way, especially in OOP (Object-Oriented Programming) approach. [...]
November 15th, 2007 at 11:23 am
thanks
November 15th, 2007 at 11:36 am
thank you
November 15th, 2007 at 11:38 am
thanks
November 15th, 2007 at 11:40 am
thanks
November 15th, 2007 at 12:42 pm
Cole, how you get it to work with dynamic height? Also it looks like you got it working with form elements…
November 15th, 2007 at 12:44 pm
danke yavrum
November 15th, 2007 at 1:49 pm
mylesef.com
November 15th, 2007 at 4:18 pm
thank u very much for this topic
November 15th, 2007 at 4:35 pm
thanksss a lot
November 15th, 2007 at 4:38 pm
ohhhh thank u very muchh
November 15th, 2007 at 5:43 pm
Very well explained tutorial, thanks for that.
November 16th, 2007 at 3:18 pm
What we should be fighting against is DRM. When you LEGALLY purchase a song, you should be allowed to do with it what you will within the law.
November 16th, 2007 at 3:19 pm
Thanks. denke shurn
November 16th, 2007 at 3:19 pm
mujux canlarim mujux
November 17th, 2007 at 7:37 pm
Thank you..
November 17th, 2007 at 7:38 pm
wery good.. sites
November 18th, 2007 at 11:16 am
good post
November 18th, 2007 at 1:26 pm
Thanks You..!
November 18th, 2007 at 2:18 pm
thanks
November 18th, 2007 at 2:19 pm
thank you
November 18th, 2007 at 2:20 pm
Really cool.
November 18th, 2007 at 2:22 pm
Thanks…
November 18th, 2007 at 2:47 pm
thnk for all informatin
November 18th, 2007 at 8:50 pm
, too, use packages, but your comment makes me want to develop that out more, and utilize your above statement if a client’s needs are exceeding their purchased package. Thanks for that.
November 18th, 2007 at 8:51 pm
…
November 18th, 2007 at 8:51 pm
…..
November 18th, 2007 at 8:52 pm
thanks…
November 18th, 2007 at 8:52 pm
……………
November 18th, 2007 at 8:53 pm
yesilyurt
November 18th, 2007 at 8:53 pm
………….
November 19th, 2007 at 7:30 am
It’s really good work,it help me in my project with slight change, accoding to my need and working both in firefox and IE.
thanx.. buddy…!
November 19th, 2007 at 8:28 am
thank you
November 19th, 2007 at 12:04 pm
Thats some nice work.
November 19th, 2007 at 2:21 pm
Hello! Thank you for the comprehensive explanation. Great work!!
Best regards from http://www.webtechnik.net
November 19th, 2007 at 6:39 pm
mermerit lavabo,mutfak tezgahları,akrilikler,akril,akrıl,lavabo,lavabolar,mermer,mermerit
November 20th, 2007 at 5:44 am
very nice works…
thanks
November 21st, 2007 at 11:44 am
It’s really good work,it help me in my project with slight change, accoding to my need and working both in firefox and IE.
thanx.. buddy…!
November 21st, 2007 at 11:45 am
Thanks You..! Good post
November 22nd, 2007 at 10:33 am
I read it and i think you right..
November 22nd, 2007 at 12:57 pm
Great Script and nice work
November 23rd, 2007 at 2:09 am
[...] 3、折叠的滑动div [...]
November 25th, 2007 at 10:06 am
thankss
November 25th, 2007 at 10:06 am
saolun
November 26th, 2007 at 12:33 pm
thank great job
November 26th, 2007 at 5:11 pm
sdf
November 28th, 2007 at 8:28 am
thanks great…
November 28th, 2007 at 8:29 am
Thanks…
November 28th, 2007 at 10:45 am
this is a great writeup, definitely a very, very good system.
November 28th, 2007 at 1:06 pm
thank you. great
November 28th, 2007 at 4:20 pm
tahnks very good
November 29th, 2007 at 12:34 pm
Hi,
Does this work with a div whose position is absolute and display style is inline
thanks
Rupin
November 29th, 2007 at 1:26 pm
thanks
November 29th, 2007 at 1:41 pm
thank you
November 30th, 2007 at 9:57 am
Hi Harry,
Great job buddy, Cool work.
I also like the way you have presentated this tutorial. I had added your website to my bookmark list
December 1st, 2007 at 8:19 am
thanks
December 1st, 2007 at 8:20 am
ohh yes
December 2nd, 2007 at 7:50 pm
thanks! it really cool.
But i have a problem with Firefox.
December 4th, 2007 at 1:03 pm
thanks man !
December 4th, 2007 at 1:04 pm
danke gud !
December 4th, 2007 at 1:05 pm
thx very good
December 4th, 2007 at 1:06 pm
thx very good ..
December 4th, 2007 at 1:06 pm
thank you
December 4th, 2007 at 2:30 pm
aaaaaaaaaaaaah! i have a big problem!
The code works perfect but only works for the first object. I have a list, and I want to hide useless information, but in the list only works first line.
Thanks
December 4th, 2007 at 6:58 pm
[...] DIVs with Javascript and CSS 67. How to Create a Collapsible DIV with Javascript and CSS 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS 69. AJAX Shopcart 70. Draggable content 71. Dragable RSS boxes 72. AJAX Pull Down Effect: Rico [...]
December 6th, 2007 at 3:38 am
The code works perfect but only works for the first object. I have a list, and I want to hide useless information, but in the list only works first line.
December 6th, 2007 at 3:38 am
thx very good ..
December 6th, 2007 at 6:51 pm
Script mirc coder version webmastır domain alış satış unreal ptlink Cr bölümleri yanıtı burda.
December 8th, 2007 at 7:04 pm
THANKS] DIVs with Javascript and CSS 67. How to Create a Collapsible DIV with Javascript and CSS 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS 69. AJAX Shopcart 70. Draggable content 71. Dragable RSS boxes 72. AJAX Pull
December 8th, 2007 at 8:25 pm
thanks gözüm
December 9th, 2007 at 4:23 pm
thanks very good
December 9th, 2007 at 7:19 pm
thanks very good ..
December 11th, 2007 at 3:13 pm
thank you ..
December 12th, 2007 at 11:08 am
We are looking forward to your next posting!
Thank you for the helpful tutorial
December 12th, 2007 at 1:05 pm
How do i make it so it starts down
December 12th, 2007 at 5:01 pm
hi your site wonderfull
December 12th, 2007 at 11:02 pm
Great and very useful informations, thanks.
December 13th, 2007 at 10:47 am
danke so fiele.
December 13th, 2007 at 10:48 am
ty very usefull info.
December 13th, 2007 at 10:51 am
danke so gud.
December 13th, 2007 at 10:53 am
dzieki..
December 13th, 2007 at 10:56 am
thanks 4 this.
December 13th, 2007 at 10:57 am
thank you very usefull informations..
December 13th, 2007 at 10:58 am
thx very much.
December 13th, 2007 at 12:47 pm
thanks.
December 13th, 2007 at 12:47 pm
thanksss
December 13th, 2007 at 12:48 pm
thank you…
December 14th, 2007 at 9:22 am
Great work, thanks….
December 14th, 2007 at 8:33 pm
thanks. really good
December 15th, 2007 at 3:01 am
thanks for dude..
December 15th, 2007 at 12:38 pm
thank you
December 15th, 2007 at 6:34 pm
thank you
December 16th, 2007 at 5:16 pm
thx very good ..
December 16th, 2007 at 5:17 pm
sağolasınn yaw
December 16th, 2007 at 5:18 pm
sağollllllllllllll
December 16th, 2007 at 11:22 pm
o0EalW Hello Perdun! Google.
December 17th, 2007 at 6:23 pm
Is there a function to have the toggleSlide(); close any opened divs, and open the selected div? I have that problem now. I have a list of 10 FAQs in rows, then each opens the appropriate div, but if i dont close them one by one, they will all be visible. Any way to do this? Did i make it clear?
December 18th, 2007 at 8:23 am
http://www.salgit.com
http://www.iyivideo.com
http://www.nekibu.com
December 18th, 2007 at 1:39 pm
thank you
December 18th, 2007 at 4:49 pm
radio online players
December 18th, 2007 at 4:50 pm
dank u harry
December 19th, 2007 at 7:17 am
teşekküürrrrrr
December 19th, 2007 at 5:48 pm
Is there a function to have the toggleSlide(); close any opened divs, and open the selected div? I have that problem now. I have a list of 10 FAQs in rows, then each opens
December 19th, 2007 at 7:35 pm
thanks nice text
December 19th, 2007 at 7:36 pm
thankss nice text…
December 19th, 2007 at 8:49 pm
Works great till I go to Style the div in an external css sheet , what do you think
December 20th, 2007 at 1:52 pm
Thanks again for the fetching function, artfully made and explained.
I’m trying to use this within a call to setTimeout, and when I call it from setTimeout it erases the animation effect. Any idea why?
function hidediv(div)
{
if(document.getElementById(div).style.display = ‘block’)
setInterval(”slideup(”"+div+”");”, 1000);
}
thank you.
December 20th, 2007 at 4:10 pm
thank you.
December 20th, 2007 at 4:26 pm
Teşekkürler.
December 20th, 2007 at 4:27 pm
thankss nice text
December 20th, 2007 at 4:28 pm
thanks…
December 21st, 2007 at 1:15 am
[...] Digger’s requests in the comments, I spent all night typing up this tutorial. Hope it helps!read more | digg story Posted in Uncategorized | Leave a [...]
December 22nd, 2007 at 4:56 am
thank you very good article
December 22nd, 2007 at 2:19 pm
I know this is Spam, but I just want to see the comment system in action.
December 23rd, 2007 at 2:31 am
Mia Tyler
Man i love reading your blog, interesting posts !
December 23rd, 2007 at 12:04 pm
thanks
December 23rd, 2007 at 4:20 pm
thanks
December 24th, 2007 at 6:55 am
Is there a function to have the toggleSlide(); close any opened divs, and open the selected div? I have that problem now. I have a list of 10 FAQs in rows, then each opens
December 25th, 2007 at 7:39 am
thanks.
December 25th, 2007 at 7:40 am
thank you very good article
December 25th, 2007 at 7:43 am
Thanks…
December 25th, 2007 at 8:46 pm
perde
December 25th, 2007 at 8:50 pm
perdede olay
December 25th, 2007 at 8:51 pm
model perderesmi
December 25th, 2007 at 8:53 pm
mrhba
December 27th, 2007 at 10:31 am
havnt you guys heard of AJAX?
December 27th, 2007 at 4:45 pm
susohbet
December 28th, 2007 at 2:10 pm
thanks sohbet
December 28th, 2007 at 4:56 pm
thanks
December 28th, 2007 at 4:57 pm
dank u
December 28th, 2007 at 8:46 pm
thanx
December 29th, 2007 at 5:56 pm
Cole, how you get it to work with dynamic height? Also it looks like you got it working with form elements
December 31st, 2007 at 4:32 pm
thanks very good super
December 31st, 2007 at 4:33 pm
super blog tskler very good aq
December 31st, 2007 at 7:50 pm
forum thanks see you
January 1st, 2008 at 8:55 am
thanks very good super
January 2nd, 2008 at 1:15 am
[...] Digger’s requests in the comments, I spent all night typing up this tutorial. Hope it helps!read more | digg [...]
January 2nd, 2008 at 4:22 pm
Awesome… thanks so much.
January 3rd, 2008 at 11:06 am
thanks regards..
January 3rd, 2008 at 3:16 pm
thank you all web
January 3rd, 2008 at 3:16 pm
hey doesnt matter
January 3rd, 2008 at 3:17 pm
hikaye web page good
January 3rd, 2008 at 9:28 pm
thank you
January 4th, 2008 at 6:15 am
thank youuu
January 4th, 2008 at 6:15 am
komik web page good
January 4th, 2008 at 5:12 pm
thanks all hikaye
January 5th, 2008 at 8:50 am
thank you so much very usefull informations.
January 6th, 2008 at 2:42 pm
thank you so much very usefull informations.
January 8th, 2008 at 2:16 pm
thanks
January 8th, 2008 at 5:59 pm
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
January 9th, 2008 at 6:56 pm
Thank you
January 9th, 2008 at 8:09 pm
I Think, İt’s Very Nice…
January 10th, 2008 at 4:18 pm
thanjsssss
January 11th, 2008 at 7:51 am
vdfvfdvdf
January 11th, 2008 at 1:19 pm
Worked very well, thanks for that
January 11th, 2008 at 2:27 pm
thank you very good idea
January 12th, 2008 at 7:01 pm
wow,l these people must be joking.
January 13th, 2008 at 2:08 pm
thanks
January 13th, 2008 at 7:58 pm
This is great. I like the animation. Has anyone figured out how to use this technique and put a ‘+’/'-’ graphic next to the link and have it correlate expanded (’-') or collapses (’+'). Thanks!
January 14th, 2008 at 9:34 am
hi there, thanks for the script!
i´m trying to add an image nex to the “slide down” link. the image should change while clicking (i.e. from “+” to “-”). Is there a possibility to make the image change while sliding the div down, and then making the image to reutrn again to its original form?
thanks
January 14th, 2008 at 5:49 pm
This is great. I like the animation. Has anyone figured out how to use this technique and put a ‘+’/’-’ graphic next to the link and have it correlate expanded (’-’) or collapses (’+’). Thanks!
YES? do you understant me?
January 14th, 2008 at 5:50 pm
du you do know
tyhanks all very good pages
January 19th, 2008 at 6:21 am
That’s great. It works perfectly well. I have two questions:
1. When I put the properties of mydiv to external css style-sheet it’s not working anymore :(. Can you show a way how to improve it.
2. What about instead a link placing an image of button, which will change on slide down, or slide up?
I just started with JavaScript, but I really love it and would like to see how to do that.
January 19th, 2008 at 12:44 pm
hey…i have a question…i think dis is out of your topic…how to make an image sliding show to make it as background of my friendster…like wen u show ur profile then ur layout is animating…sliding show ur images?????
January 20th, 2008 at 7:53 pm
Hi there, i been trying this, but i cant get it to work in any way. I have tryed too mootols and nothing does work.
Either the divs appear open like if they where simple divs (non clickable to close), or just the link that doesnt make the accordion effect.
Neither firefox, iexplorer, safari or opera do work with this. But i can see the effect in your website why?
does it need the webpage to be uploaded to the server in order to work?
I really cant find a problem followed the instructions step by step over twohundred times, its driving me nuts!
January 22nd, 2008 at 8:43 am
Very useful information
January 23rd, 2008 at 6:26 pm
sohbet
thanx for you
January 24th, 2008 at 12:39 pm
aşk şiirleri Thankss …!
January 24th, 2008 at 12:39 pm
aşk şiirleri Thankss …!
January 24th, 2008 at 12:56 pm
ohhh yeahhh
January 24th, 2008 at 5:00 pm
Thanks
January 24th, 2008 at 5:03 pm
Nice site
January 25th, 2008 at 3:36 am
Big thanks! Very helpful article!
January 25th, 2008 at 3:39 am
Very usefull info! Thank guys for you work!
Jimmy
January 25th, 2008 at 12:27 pm
Thank you
January 25th, 2008 at 12:53 pm
tnkhs
January 25th, 2008 at 12:54 pm
thkns
January 25th, 2008 at 1:36 pm
amatuer nude wrestlers
January 27th, 2008 at 8:37 am
THANK YOU
January 27th, 2008 at 8:38 am
thank
January 27th, 2008 at 2:46 pm
this is great but if you want one that works seamlessly with dynamic size, i.e. don’t have to worry about the height or amount of text in the div check out this http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
January 27th, 2008 at 8:49 pm
thanks
January 28th, 2008 at 8:02 am
thanks
January 29th, 2008 at 1:39 am
Muhabbet, islami sohbet, dini sohbet
January 29th, 2008 at 5:33 am
thanks
January 29th, 2008 at 1:18 pm
oyunlar
January 29th, 2008 at 1:20 pm
thanks very good article.
January 30th, 2008 at 12:13 pm
thanks
February 1st, 2008 at 2:52 am
Sara Bareilles - Love Song
Sara Bareilles - Love Song
February 1st, 2008 at 12:44 pm
Free Nokia Themes
February 1st, 2008 at 12:45 pm
Super Car Pro
February 1st, 2008 at 12:45 pm
The Arcade Zone
February 1st, 2008 at 12:46 pm
Scientists Blog
February 1st, 2008 at 12:46 pm
Site Money
February 1st, 2008 at 12:47 pm
Mobiles News
February 1st, 2008 at 12:47 pm
Games News & Reviews
February 1st, 2008 at 2:19 pm
asian girl on ladder
asian girl on ladder
February 2nd, 2008 at 3:07 am
pre teen pageant gown
February 2nd, 2008 at 3:56 am
thanks
February 2nd, 2008 at 11:28 am
This is pretty neat. Thanks for taking the time to write it up!!!
February 2nd, 2008 at 11:29 am
thnx all
February 3rd, 2008 at 2:34 am
alex
February 3rd, 2008 at 2:35 am
linda
February 3rd, 2008 at 2:36 am
ayhan
February 3rd, 2008 at 2:36 am
askinm
February 3rd, 2008 at 2:37 am
ece
February 3rd, 2008 at 2:37 am
retkit
February 3rd, 2008 at 2:38 am
canim
February 3rd, 2008 at 2:38 am
canyou
February 3rd, 2008 at 4:21 pm
sohbet mirc addon forum arkadaşlık
February 3rd, 2008 at 4:23 pm
sevgi ask şiir video forum güzelsözler sinama sarkı
February 4th, 2008 at 8:09 am
Thanks this examples .! good Works !
February 4th, 2008 at 7:15 pm
Is there a function to have the toggleSlide(); close any opened divs, and open the selected div? I have that problem now. I have a list of 10 FAQs in rows, then each opens
February 6th, 2008 at 4:21 pm
great script, but i want the dropdown to go over the top of a flash animation. i tried wmode=”transparent” , but it still appears beneath the swf…any ideas?
February 6th, 2008 at 5:03 pm
This is great. I like the animation. Has anyone figured out how to use this technique and put a ‘+’/’-’ graphic next to the link and have it correlate expanded (’-’) or collapses (’+’). Thanks!
February 6th, 2008 at 5:04 pm
Thanks
February 7th, 2008 at 2:00 pm
Thank You for another very interesting article. So please try to keep up the great work all the time.
February 7th, 2008 at 2:01 pm
hi there, my trackbacks does not work. just would like to say thanks for this plugin, appears on my “must-have” list
February 7th, 2008 at 3:12 pm
thanks you
February 8th, 2008 at 2:30 pm
danke so fiele
February 8th, 2008 at 2:31 pm
thank you men
February 8th, 2008 at 2:34 pm
ty excellent article
February 8th, 2008 at 2:35 pm
ty useful informations
February 9th, 2008 at 1:34 pm
thank you man.
February 9th, 2008 at 1:35 pm
this is great but if you want one that works seamlessly with dynamic size, i.e. don’t have to worry about the height or amount of text in the div check out this
February 9th, 2008 at 10:15 pm
thanks
February 10th, 2008 at 5:09 am
I hope to do the occasional “grab bag” post where people can throw out questions or comments about miscellaneous topics. Off-topic comments in other threads may be pruned. If I post about a laser pointer and you ask about a PageRank update, you’re probably outta there. Save it for the grab bag.
- One-line or “me too” comments rarely add much to the conversation, and I often prune them unless they’re frickin’ hilarious.
February 11th, 2008 at 8:23 am
This is a nice tutorial. something I search for a long time.
February 12th, 2008 at 9:37 am
thanksss
February 12th, 2008 at 6:20 pm
Thank you!
February 15th, 2008 at 9:02 am
thank you
February 15th, 2008 at 10:41 pm
thankss
February 16th, 2008 at 8:46 am
thank you wery mach
February 16th, 2008 at 8:47 am
wery mach
February 16th, 2008 at 8:49 pm
thanks dude.
February 17th, 2008 at 5:08 am
Thank you guy!
it’s nice work..
February 17th, 2008 at 5:09 am
Thanks
February 17th, 2008 at 5:10 am
Thank you great articles
February 17th, 2008 at 5:11 am
Thank you …
February 17th, 2008 at 5:12 am
Thanks
February 17th, 2008 at 5:12 am
thanksss
February 17th, 2008 at 5:14 am
Thank you!
February 17th, 2008 at 5:23 am
Great jop man .
February 17th, 2008 at 5:23 am
nice essay
February 17th, 2008 at 5:31 am
Thank you for the helpful tutorial
February 17th, 2008 at 5:34 am
nice articles;)
February 17th, 2008 at 5:48 am
I was looking for that…thanks
February 17th, 2008 at 5:59 am
thanks nice
February 17th, 2008 at 6:03 am
Thanks
February 17th, 2008 at 6:22 am
good thanks
February 17th, 2008 at 6:31 am
thank you very much.
February 17th, 2008 at 7:11 am
Thank good document
http://www.ortamdayiz.biz
February 17th, 2008 at 7:16 am
Thanks.
http://www.posetdolum.com
February 17th, 2008 at 7:17 am
Süper Site
http://www.supertr.net
February 17th, 2008 at 7:39 am
Thanks a lot for this article
February 17th, 2008 at 7:46 am
this is great but if you want one that works seamlessly with dynamic size, i.e. don’t have to worry about the height or amount of text in the div check out this
February 17th, 2008 at 8:25 am
thanks very nice..
February 17th, 2008 at 8:26 am
velet bu yahu
February 17th, 2008 at 8:26 am
I was looking for that…thanks
February 17th, 2008 at 8:26 am
ohh yes good:D
http://www.mp4divx.com
February 17th, 2008 at 8:27 am
thank you ver much
February 17th, 2008 at 8:29 am
thanks man
February 17th, 2008 at 10:53 am
thanks
February 17th, 2008 at 10:54 am
good site http://www.Sohbetmix.Net
February 17th, 2008 at 10:59 am
very good thanx http://www.sanaldata.net
February 17th, 2008 at 11:00 am
very good thanx
February 17th, 2008 at 11:10 am
http://www.sanaldata.net
February 17th, 2008 at 11:10 am
thanx
February 17th, 2008 at 11:12 am
thnax
February 17th, 2008 at 11:14 am
thanx man great stuff, über 50.000 klingeltöne,handy spiele
February 17th, 2008 at 11:27 am
thanx very good
February 17th, 2008 at 11:27 am
nokiaoyun.blogcu.com
February 17th, 2008 at 11:28 am
thanxs man
February 17th, 2008 at 11:30 am
Thanks…
February 17th, 2008 at 11:31 am
http://programturk.blogspot.com Programs - Games - Tools
February 17th, 2008 at 11:32 am
thanks….
February 17th, 2008 at 11:55 am
thanx man !!
February 17th, 2008 at 12:14 pm
thank you
February 17th, 2008 at 12:49 pm
I was looking for that…thanks
February 17th, 2008 at 1:09 pm
Great work! Thanks
February 17th, 2008 at 2:19 pm
thanks again i love this blog.
February 17th, 2008 at 2:22 pm
thanks
February 17th, 2008 at 2:25 pm
Thank you harry for this article.. i love it.. enjoy..
February 17th, 2008 at 2:26 pm
thank you harry maugans. this article is wonderfull
February 17th, 2008 at 2:38 pm
thank you for at all..
February 17th, 2008 at 3:38 pm
thank you
February 17th, 2008 at 3:41 pm
thank you.
February 17th, 2008 at 4:42 pm
thanks harry.article is nice
February 18th, 2008 at 5:05 am
thanks..
February 18th, 2008 at 5:22 am
thanks
http://www.gencmavi.com
http://www.mavindir.com
http://www.komikgenc.blogspot.com
February 18th, 2008 at 5:28 am
thanks very good
http://www.fotoajans.bloggum.com
http://www.sempanze.blogcu.com
http://www.otomotor.blogcu.com
February 18th, 2008 at 6:54 am
Thanks very very good infos. again thanks
February 18th, 2008 at 8:12 am
Thanks very very good infos. again thanks
February 18th, 2008 at 8:13 am
TThanks very very good infos. again thanks!
February 18th, 2008 at 8:14 am
Thanks very very good infos. again thanks……
February 18th, 2008 at 8:20 am
Very thanks,
http://kampanyabul.blogspot.com
Güncel Kampanya Sitesi
Turkish Blog Site
February 18th, 2008 at 8:41 am
Thanks
http://www.exdizayn.com
Web Services and Development
February 18th, 2008 at 11:58 am
good tipp, it works
February 18th, 2008 at 12:17 pm
hey allahım ne günlere kaldık
elin gavuruna el açtırma yarabbim =-)
February 18th, 2008 at 2:51 pm
kurye moto kurye
February 18th, 2008 at 2:54 pm
kurye moto kurye motorlu kurye avrupa yakası kurye
February 18th, 2008 at 4:16 pm
thanks a lot good
February 18th, 2008 at 4:17 pm
good share thanks a lot
February 18th, 2008 at 9:02 pm
Nice functions. I have tested the script and it works fine for me
February 18th, 2008 at 11:38 pm
mirc download
February 18th, 2008 at 11:41 pm
Thank you very nice mynet sohbet
February 18th, 2008 at 11:42 pm
Sohbet.tw Sohbet odalari
February 18th, 2008 at 11:42 pm
Forum kahvesi bilgi paylasim forumu
February 18th, 2008 at 11:43 pm
Alan adi tescil , Domain kayit
February 18th, 2008 at 11:46 pm
Toplist , Dizin , Siteni ekle
February 18th, 2008 at 11:48 pm
Webmaster tools
February 19th, 2008 at 5:31 am
Thanks….
Sitemize Herkezi Bekleriz.
http://www.forumultra.org
February 19th, 2008 at 5:33 am
thank you for at all.
February 19th, 2008 at 5:34 am
Thanx. good sites.
February 19th, 2008 at 5:35 am
Thanks very very good infos. again thanks
February 19th, 2008 at 8:04 am
thaanks
February 19th, 2008 at 8:05 am
çok güzel site inşallah faydası olur
February 19th, 2008 at 8:09 am
güzel
February 19th, 2008 at 8:13 am
harika ty
February 19th, 2008 at 8:17 am
thx
http://www.celebstar.us
February 19th, 2008 at 8:48 am
Die Türkei mit ihren großartigen Landschaften und unzähligen Kulturschätzen ist ideal für eine Erkundungsreise mit dem PKW/Mietwagen. Kommen Sie zur Turtas Autovermietung! Egal ob mit Kind und Kegel oder für die Reise zu zweit: Wir haben für Sie den passenden Mietwagen – und das zu fairen Preisen
Antalya car rental service, free airport delivery, can make reservation from internet or via phone. All new model cars. Discounts at second renting. 08:00 - 00:00 (gmt+2) phone support.
February 19th, 2008 at 12:10 pm
Wow this is so cool thanx so much !
February 19th, 2008 at 12:43 pm
saol kardeş
http://www.surucukursunuz.com
February 20th, 2008 at 2:19 am
the heels of two very successful tutorials on creating a collapsible div and an animated sliding div, I’ve decided to write another. It seems my last few helped a number of programmers learn a
dersvakti.net
February 20th, 2008 at 3:23 am
Emeğine SağLık Üsdad
Http://forumplaza.org
February 20th, 2008 at 6:04 am
thanks a lot
February 20th, 2008 at 12:31 pm
Thank you..
February 20th, 2008 at 6:22 pm
Thanks you..
February 20th, 2008 at 6:23 pm
Thanks.
http://www.turksevdasi.com
http://www.sevdamol.net
http://www.chatarkadas.net
February 20th, 2008 at 7:48 pm
thanx,,
http://www.dersimizkpss.com
February 20th, 2008 at 11:50 pm
male enhancement products, penis enlargement system,
February 21st, 2008 at 8:22 am
Thanx very good
http://www.ozeldepo.com/
February 21st, 2008 at 4:36 pm
cool stuff
February 21st, 2008 at 5:10 pm
Thank you for your work.
February 21st, 2008 at 5:12 pm
Thanks.
February 21st, 2008 at 5:46 pm
süperrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
February 21st, 2008 at 5:47 pm
offfffffffffffffffff
February 21st, 2008 at 8:04 pm
thanks alot
February 21st, 2008 at 8:05 pm
thank you so much
February 21st, 2008 at 8:05 pm
thank you for this services
February 21st, 2008 at 8:06 pm
danke manke falan
February 21st, 2008 at 8:07 pm
thank you so much
February 22nd, 2008 at 6:57 am
Hello, Nice article.
Thank you very much
video ekle izle video siteleri video indir google videoları
video siteleri
February 22nd, 2008 at 3:24 pm
Thanks. Very useful article
February 22nd, 2008 at 3:42 pm
thanks for all
February 22nd, 2008 at 5:21 pm
thanks
February 22nd, 2008 at 7:28 pm
Thanks for this
February 22nd, 2008 at 8:47 pm
I love Java
February 23rd, 2008 at 3:26 am
thank you so much
February 23rd, 2008 at 7:13 am
i cannot understand
February 23rd, 2008 at 9:36 am
Thank You.. Goooddd. very goood..
http://www.batmanpostasigazetesi.com/
February 23rd, 2008 at 12:05 pm
Unfortunately, I have to agree with many of the above comments. John fawned over Neil like he was a single piece of manna found in the middle of the desert by the Hebrew of the bible yes I’m Thank You Blogs.
February 23rd, 2008 at 5:27 pm
thank you for artichle
February 23rd, 2008 at 5:31 pm
I fine thank you for
February 23rd, 2008 at 7:42 pm
http://www.chatkalbi.com chat
February 23rd, 2008 at 9:52 pm
There are many useful informations in this great article
February 24th, 2008 at 2:18 am
Nice tutorial, but there is a problem with static height.
February 24th, 2008 at 2:20 am
fantastico..
February 24th, 2008 at 2:22 am
thank you for the article..
February 24th, 2008 at 2:23 am
very well done..
February 24th, 2008 at 2:24 am
convenable..
February 24th, 2008 at 2:25 am
herzensgut..
February 24th, 2008 at 5:40 am
Nice tutorial, but there is a problem with static height
dj deejays
Thank you
February 24th, 2008 at 5:41 am
Theree aree manyy usefull informatioons inn thiis greaat aarticle dj deejays
February 24th, 2008 at 5:41 am
thank you
February 24th, 2008 at 4:54 pm
Die Türkei mit ihren großartigen Landschaften und unzähligen Kulturschätzen ist ideal für eine Erkundungsreise mit dem PKW/Mietwagen. Kommen Sie zur Turtas Autovermietung! Egal ob mit Kind und Kegel oder für die Reise zu zweit: Wir haben für Sie den passenden Mietwagen – und das zu fairen Preisen
February 24th, 2008 at 4:56 pm
Nice functions. I have tested the script and it works fine for me
February 24th, 2008 at 4:57 pm
opciones adicionales tras enlaces que al ser pulsados muestran su contenido. En la página de Harry Maugans nos encontramos con un script que nos permitirá realizar este efecto haciendo visible el contenido
February 24th, 2008 at 4:59 pm
This function is what actually does the animation itself. The first line checks how long the animation has been in progress, by subtracting the animation’s start time from the current time.
February 24th, 2008 at 8:44 pm
Great work! Thanks for this post
February 25th, 2008 at 4:15 am
muhabbet, sohbet, sohbet odaları, muhabbet odaları, chat, çet
February 25th, 2008 at 4:16 am
ohhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhooooooooooooooooooooooooooooooho
February 25th, 2008 at 4:16 am
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
February 25th, 2008 at 4:18 am
msn nickleri,aşk nickleri,şekilli nickler,damar nickler
February 25th, 2008 at 8:22 am
Very good tutorial.It was very helpful.Is there any way to collapse all ,expand all (like
that in gmail)
February 25th, 2008 at 9:32 am
Çok teşekkürler
very useful
English: Thank you very much
February 25th, 2008 at 9:44 am
thankls
February 26th, 2008 at 3:34 am
Thanks
February 26th, 2008 at 4:27 am
thanks
Web Tasarım
Toplist
Barkod Yazıcı Okuyucu
Yönetilebilir Web Sayfası
February 26th, 2008 at 9:17 am
Global Renting Perth
Global Renting Perth
Global Renting PerthA good real estate marketing flyer will also be attractively designed, neat and devoid of clutter. If you want to try out investing in Tampa real estate, you have to be prepared and armed before you enter such v…
February 26th, 2008 at 10:50 am
thnax nice site
February 26th, 2008 at 1:34 pm
korku,korkunç,giyotin,korku sitesi
February 26th, 2008 at 1:34 pm
korku,korkunç,giyotin,korku sitesi
February 26th, 2008 at 1:35 pm
korku,korkunç,giyotin,korku sitesi
February 26th, 2008 at 1:35 pm
korku,korkunç,giyotin,korku sitesi
February 27th, 2008 at 12:34 am
sohbet arkadaslik kamerali sohbet görüntülü chat odalari radyo dinle chat yap forum bilgi paylasimi forum oyunlari daha nicelri
February 27th, 2008 at 12:34 am
http://www.sevdamisali.com http://www.sevdafm.biz
February 27th, 2008 at 12:35 am
sohbet arkadaslik forum radyo dinle sohbet yap http://www.sevdamisali.com http://www.sevdafm.biz
February 27th, 2008 at 12:36 am
http://www.sevdamisali.com
February 27th, 2008 at 8:32 am
Online Chat edebileceğiniz bir sohbet sitesi. Anasayfasından hemen sohbete bşalayabileceğiniz sitede bundan başka , Sevgi ve Aşka dair
February 27th, 2008 at 11:41 pm
Buying Property at a Trustee?s Sale/Auction Posted By : Seb Frey
Buying Property at a Trustee?s Sale/Auction Posted By : Seb Frey
Buying Property at a Trustee’s Sale/Auction Posted By : Seb FreyA great deal of confusion surrounds the issue of buying foreclosure real estate at the Trustee’s Sale. This article exp…
February 28th, 2008 at 2:24 pm
havnt you guys heard of AJAX?
February 28th, 2008 at 2:25 pm
Very good tutorial.It was very helpful.Is there any way to collapse all ,expand all (like
that in gmail)
February 28th, 2008 at 2:27 pm
opciones adicionales tras enlaces que al ser pulsados muestran su contenido. En la página de Harry Maugans nos encontramos con un script que nos permitirá realizar este efecto haciendo visible el contenido
February 28th, 2008 at 2:27 pm
I love it except if you select all and then copy it still copies the hidden text. Is there anyway to fix that?
February 28th, 2008 at 9:28 pm
thnx all
February 29th, 2008 at 8:10 am
Very good tutorial.It was very helpful.Is there any way to collapse all ,expand all (like
that in gmail)
February 29th, 2008 at 8:11 am
Thanyou
February 29th, 2008 at 8:11 am
Thankyou
February 29th, 2008 at 12:58 pm
this code was very helpful for me, however i wanted to know how you would use .onclick within the javascript instead of depending on a link.
so that if i were to click somehting like:
Link 1
the javascript would use something like:
var animElements = document.getElementById(”fadercontainermem”).getElementsByTagName(”p”);
for(var i=0; i
February 29th, 2008 at 1:03 pm
the comment seems to have cut off most of my code. but my point is, i would rather use .onclick, than onmousedown through a link. actually i would prefer to not use a link at all.
i tried to do it myself, but i think that i couldn’t simply replace objname with the element i would like to change.
February 29th, 2008 at 1:05 pm
And another issue i had was that when i tried to put the styling of the div in a css file or in the head, instead of directly on the div, it seemed to disrupt the javascript, and no longer did much of anything.
February 29th, 2008 at 4:33 pm
This is cool, the only problem that I can think of is you said that you need to define the height. What if your using the div for comment box and the height is dependent on how much is commented.
February 29th, 2008 at 10:00 pm
http://www.yurtchat.net
March 1st, 2008 at 3:16 pm
Thank you for the interesting article and for the code.
He has help me. Regards
March 2nd, 2008 at 4:31 am
Thanks for this best article
March 3rd, 2008 at 6:18 am
thank you
March 4th, 2008 at 11:40 am
hello
March 5th, 2008 at 9:46 am
thank you
March 5th, 2008 at 9:59 am
thanks
March 6th, 2008 at 11:12 am
arkadaş ara facebook | thanks for add
March 6th, 2008 at 11:42 am
thants great
March 6th, 2008 at 4:05 pm
Thank you very much!
March 6th, 2008 at 4:05 pm
Thank you very much!
March 6th, 2008 at 4:06 pm
i think it is very exciting.
March 6th, 2008 at 4:08 pm
thanks for the this article.
March 6th, 2008 at 4:28 pm
Thnx man…
March 6th, 2008 at 4:35 pm
Thank you very much!
March 6th, 2008 at 4:36 pm
Thanks man…
March 6th, 2008 at 5:29 pm
Thanks you very much [ Koyuyimde geri Kaç ]…
March 6th, 2008 at 5:56 pm
[...] I learned it all at Harry Maugans blog, you can see the whole javascript here: Sliding/Collapsing Div [...]
March 6th, 2008 at 9:21 pm
Thank you
March 6th, 2008 at 9:24 pm
güzel oldu güzel
March 8th, 2008 at 9:39 pm
süper bişi saol
March 10th, 2008 at 8:15 pm
Thank you
March 11th, 2008 at 10:18 am
Thanks.
March 12th, 2008 at 4:08 am
Thans nice
March 12th, 2008 at 8:32 am
thanks
March 13th, 2008 at 6:21 pm
I read it and i think you right
March 14th, 2008 at 6:00 pm
Thanks! I scanned the article, copied the script, and had it working within 10 minutes. That’s the sign of a great article!
I had to specify heights for my divs. But you probably mention that in the body of your article (which I didn’t have time to read!).
March 15th, 2008 at 5:35 pm
thanks
March 16th, 2008 at 3:25 am
http://www.fikraturk.net
March 16th, 2008 at 8:22 am
thanks so much
March 16th, 2008 at 8:04 pm
march1
March 18th, 2008 at 8:07 am
all thanks brb .
March 18th, 2008 at 11:34 pm
I read it and i think you right
March 20th, 2008 at 11:10 am
do you have any idea about this comment field?
i like it.
March 20th, 2008 at 12:40 pm
thanks a lot ..
March 21st, 2008 at 4:58 pm
Great article thanks
March 22nd, 2008 at 6:20 pm
thankss too goodd
March 23rd, 2008 at 3:14 pm
thanks man!
March 24th, 2008 at 5:37 pm
Thankss hurrymangas!
March 24th, 2008 at 5:41 pm
Thankss the eNd.!
March 25th, 2008 at 8:30 am
top site go on
March 25th, 2008 at 8:30 am
thanks
March 25th, 2008 at 12:01 pm
Thanks Good Work
March 25th, 2008 at 12:40 pm
Great post!
March 25th, 2008 at 2:15 pm
thankss
March 25th, 2008 at 2:16 pm
sohbet
March 26th, 2008 at 7:46 am
thnks
March 27th, 2008 at 12:55 pm
Nice script! Did anybody try to include “Loading.. Please Wait!” message into that is supposed to slide down while images and text are loaded? I think it is important add-on.
March 29th, 2008 at 11:54 am
thanks, that’s a good work!
March 29th, 2008 at 3:35 pm
Has anyone re-written this for cross browser compatability. I need it to funtion with IE6.
March 29th, 2008 at 3:37 pm
Thank you.
Great help stating.
March 29th, 2008 at 3:38 pm
Thank you for the helpful tutorial
March 30th, 2008 at 3:02 pm
First js script tutorial I could understand! Thanks again for sharing
March 30th, 2008 at 3:05 pm
it’s good thanks for sharing
March 31st, 2008 at 7:54 pm
very nice blog..
March 31st, 2008 at 7:55 pm
very nice blog system
April 2nd, 2008 at 12:18 pm
Nice Blog… thanks.
April 3rd, 2008 at 3:02 am
Thank you. http://www.ekinoksforum.com da bu konu ile ilgili bilgiler mevcut.
April 3rd, 2008 at 3:05 am
Nice Blog. Good like.
April 3rd, 2008 at 4:12 am
thankyouu bloggers
April 3rd, 2008 at 4:13 am
goodd like
April 3rd, 2008 at 4:19 am
very nice blog system
April 3rd, 2008 at 4:21 am
Has anyone re-written this for cross browser compatability. I need it to funtion with IE6.
April 3rd, 2008 at 4:22 am
very nice blog system ” Has anyone re-written this for cross browser compatability. I need it to funtion with IE6. “
April 3rd, 2008 at 4:24 am
thankss goodd syesteemm
April 3rd, 2008 at 4:24 am
thanksss goood systemmm the end codee thankyouu
April 3rd, 2008 at 4:59 am
thank you man
April 3rd, 2008 at 4:59 am
thank you man
April 3rd, 2008 at 5:00 am
yeah
April 3rd, 2008 at 5:01 am
very good
April 3rd, 2008 at 12:13 pm
thanks for article good information
April 4th, 2008 at 8:07 pm
muhabbet
muhabbet
April 5th, 2008 at 10:26 am
thanks a lot..
April 6th, 2008 at 1:27 pm
Thanks for very interesting article.
April 7th, 2008 at 7:46 pm
Sorry it took so long to respond. I wrote about 10 days ago that it wouldn’t work for me in Firefox. I wasn’t totally correct. It works for me on Firefox at home, but not at work? Both are versions 2.0.0.2. I don’t know, maybe its some setting I have… Any ideas. I’m glad I can finally see it now in Firefox!
April 7th, 2008 at 7:47 pm
good news thank you
April 7th, 2008 at 7:47 pm
Funny girl game
April 7th, 2008 at 7:48 pm
good sir. article
April 8th, 2008 at 4:31 am
Nice functions. I have tested the script and it works fine for me
April 8th, 2008 at 8:41 am
Thank you
April 8th, 2008 at 9:50 am
Thanks You.
April 8th, 2008 at 12:10 pm
thankyou
http://www.sohbet03.net
April 8th, 2008 at 6:46 pm
very nice blog system ” Has anyone re-written this for cross browser compatability. I need it to funtion with IE6. “
April 10th, 2008 at 8:53 pm
Thanks very nice.
http://www.moralhaber.net
April 11th, 2008 at 3:41 am
thankyou
April 11th, 2008 at 5:44 am
thanks very good article
April 12th, 2008 at 5:39 am
mujux canlarim mujux
April 12th, 2008 at 5:40 am
http://www.oyunuk.com thankyou
April 12th, 2008 at 9:17 am
Thanks canım benim seviyorum seni
April 12th, 2008 at 3:39 pm
thanksssssssssssssssssssss
April 14th, 2008 at 5:56 am
Thanks guys…
April 14th, 2008 at 7:10 am
Thank you…
April 14th, 2008 at 7:10 am
Thank you very much
April 14th, 2008 at 9:58 am
Thank you
April 21st, 2008 at 12:55 pm
free gay man naked video
gay man in black leather
April 21st, 2008 at 2:26 pm
thanksstouu talk the endss
April 21st, 2008 at 3:07 pm
thanksssssssssssssssssss
April 21st, 2008 at 3:08 pm
thanKss goooddd
April 21st, 2008 at 3:08 pm
thankss
April 23rd, 2008 at 6:23 am
dsasdasdasdasdasd
April 23rd, 2008 at 6:24 am
sex shop
April 23rd, 2008 at 6:26 am
sasadsadasdas
April 23rd, 2008 at 6:28 am
eskkskss
April 23rd, 2008 at 6:28 am
asasassaas
April 23rd, 2008 at 6:31 am
aasassaas
April 23rd, 2008 at 6:34 am
SADASASDASDAS
April 23rd, 2008 at 6:34 am
penisisiisis
April 23rd, 2008 at 6:35 am
sadsadsadasd
April 23rd, 2008 at 6:36 am
sadasdasdasd
April 23rd, 2008 at 6:37 am
sadsadasdsadsa
April 23rd, 2008 at 6:38 am
ASDASDASDASDA
April 23rd, 2008 at 6:39 am
SSAASDASDASD
April 23rd, 2008 at 6:40 am
SSADASDASD
April 23rd, 2008 at 6:41 am
SSDAASDASD
April 23rd, 2008 at 6:42 am
sadadasdsad
April 23rd, 2008 at 6:43 am
SADSADSADASD
April 23rd, 2008 at 6:44 am
sdsadasdsadasdsad
April 23rd, 2008 at 6:45 am
sadsadasdasdad
April 23rd, 2008 at 6:46 am
dssadsadsadsa
April 23rd, 2008 at 6:46 am
sadsaasdsdasd
April 23rd, 2008 at 6:49 am
sdsadasdasd
April 23rd, 2008 at 6:49 am
sadasdasdasdas
April 23rd, 2008 at 6:51 am
sdasdasdasdasd
April 23rd, 2008 at 6:52 am
sadsaddsadsad
April 23rd, 2008 at 7:07 am
asdsadsadsadasdsa
April 23rd, 2008 at 7:08 am
sadasfdsfsdfsdfsdsdf
April 23rd, 2008 at 7:08 am
saasdasdsdafdds
April 23rd, 2008 at 7:09 am
sdsadasdsasdsad
April 23rd, 2008 at 7:58 am
thansx you garry
April 23rd, 2008 at 9:56 am
I thank for the knowledge
April 23rd, 2008 at 10:20 am
I thank for the knowledge
April 23rd, 2008 at 4:52 pm
dorms
classic scorched earth
April 23rd, 2008 at 6:36 pm
thank you very good article…
April 24th, 2008 at 6:35 am
MLM Is About YOU!
Similar entries Bill’s Houdini Ledgard Bridge Boats- Canal Boat/ Dutch Barge Build Cam/ Video More info. from Gerd Muller Wahoo Docks Michael Storer Boat Design Look at Mystic CT Real estate on both the Groton and Stonington sides of the river.
April 24th, 2008 at 11:21 am
Nice post. Well done. Thanks.
April 24th, 2008 at 11:22 am
Really impressive. Thanks.
April 26th, 2008 at 4:55 pm
vxcvcxvcxvcxvcxv
April 27th, 2008 at 9:03 am
very thanks guzel olmus
April 27th, 2008 at 11:29 am
very thanks guzel olmus
April 27th, 2008 at 11:44 am
Thanks for post, and nice all comments !
April 27th, 2008 at 12:51 pm
We are looking forward to your next posting!
Thank you for the helpful tutorial
April 28th, 2008 at 6:09 am
making money
– …
April 28th, 2008 at 6:00 pm
making money
“ …
April 29th, 2008 at 2:16 pm
Cock Massive Cocks Cumshots Big Gay Cock
I can not agree with you in 100% regarding some thoughts, but you got good point of view
May 1st, 2008 at 8:01 am
Good news
Thank you
May 1st, 2008 at 8:02 am
I hope everybody read this article
May 1st, 2008 at 8:48 am
good news
thanks
May 4th, 2008 at 6:26 pm
Hotels istanbul,Turkey.Book your hotel in Istanbul online.Good availability and great rates!
May 5th, 2008 at 1:44 am
Nobody can stop me by posting these comments.
http://www.businesswebhostings.net
May 5th, 2008 at 10:09 am
very nice share.
May 5th, 2008 at 10:09 am
i love it.
May 5th, 2008 at 10:10 am
great..
May 5th, 2008 at 1:34 pm
thanks a lot!
May 5th, 2008 at 6:34 pm
hot air balloons uk
Excellent adventures
May 6th, 2008 at 10:05 am
Hot Air Ballooning | Grand Day Out
Hot Air Ballooning | Come Fly Today
May 6th, 2008 at 3:13 pm
THANKS ADMİN VERY GOOD
May 8th, 2008 at 3:02 pm
Eric
May 8th, 2008 at 10:47 pm
Insurance Small Business Health Insurance Nationwide Insurance
I can not agree with you in 100% regarding some thoughts, but you got good point of view
May 9th, 2008 at 2:18 pm
Online Türkçe Rap Dinle
May 9th, 2008 at 2:19 pm
Online Türkçe Rap dinle
May 10th, 2008 at 6:47 am
Thx for this nice code, I love it really!
May 10th, 2008 at 9:22 pm
credit repair card bank to serve bad
I want to learn more about this topic, thanks for posting it.
May 11th, 2008 at 7:38 am
very thanks you
May 12th, 2008 at 2:07 am
Buy A Car with Bad Credit
2. Save some interest. Let’ s say your car loan was initially for 25,000 and you have been making payments on it for a few years. Example: every month you send the car company 495; but only 350 is actually going towards the car… the rest is interes…
May 12th, 2008 at 5:08 pm
ffffffffffffffff
May 12th, 2008 at 5:09 pm
bbbbbbb
May 13th, 2008 at 4:19 am
chase bank background checks
I’m with the earlier poster, this seems like a good idea.
May 13th, 2008 at 5:22 am
thanks
May 13th, 2008 at 5:23 am
rap, türkçe rap, rap müzik
May 15th, 2008 at 11:12 am
very . . . nice
thanks . . .
May 16th, 2008 at 9:37 am
Thanx your article
May 16th, 2008 at 9:39 am
nice article thanks for sharing with us
May 16th, 2008 at 8:56 pm
very very very niceeeeeee
thank u
May 17th, 2008 at 8:21 pm
Free Home Insurance Quotes Http http://Www.insurance.com Home.aspx
Hi - just wanted to say good design and blog -
May 18th, 2008 at 4:26 pm
thanx
May 19th, 2008 at 3:03 am
but you got good point of view
May 19th, 2008 at 7:09 am
good news
May 19th, 2008 at 7:09 am
Save some interest. Let’ s say your car loan was initially for 25,000 and you have been making payments on it for a few years. Example: every month you send the car company 495; but only 350 is actually
May 25th, 2008 at 3:49 am
This is a great tutorial!
————————
If anyone who is using multiple expandable DIV’s and you wanted one of them open by default when the page is opened replace the tag with this…
With ‘mydiv1′ being the name of the DIV you want open by default!
————————
However, does anyone know how to set it so if you have one open it will automatically close the other you have open…?
————————
Many thanks, J
May 25th, 2008 at 3:51 am
Ahh,
I see it removed my HTML I used for an example
May 25th, 2008 at 10:15 am
I am a teacher. This article is so good and I’ve translated this into Turkish. i use in my lesson. thank you so much.
May 25th, 2008 at 10:15 am
thank you so much
May 27th, 2008 at 6:52 pm
thanksssssssssss
May 27th, 2008 at 6:53 pm
thanks adminn
May 28th, 2008 at 5:20 am
thanks sohbet
May 30th, 2008 at 4:08 pm
thankss
May 30th, 2008 at 4:08 pm
hımm very good
May 31st, 2008 at 3:58 pm
nice, how can i make it resize to different heights when i klick on different links? like:
settings (resize to 500px) friends (300px) panel (350px)
June 1st, 2008 at 8:38 am
Tesekkurler Beyler..
June 1st, 2008 at 3:39 pm
çok güzel.. tşk
June 3rd, 2008 at 2:05 pm
thanks for it
June 4th, 2008 at 4:08 pm
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
June 4th, 2008 at 4:11 pm
so good..
June 5th, 2008 at 2:57 pm
Thank you man good
June 6th, 2008 at 10:06 am
Does it compatible with mootools?
June 7th, 2008 at 2:01 pm
Thanks good.
June 8th, 2008 at 12:47 pm
very good thnx
June 10th, 2008 at 9:28 am
thanksss
June 10th, 2008 at 10:29 am
Thank man..
June 10th, 2008 at 10:59 am
hey there rally interesting tutorial.i have a question.in the js fil you provide for downloading you have a line there,tha says
timerID[objname] = setInterval(’slidetick(\” + objname + ‘\’);’,timerlen);
i really dont understand the meaining of the slash and quotes that surrounds the objname (the argument of the slidetick).if this slushes and qutes and + arent there the script don’t work!can you please explain to me what’s their meaning in javascript
,cause i have searched the whole web and found nothing!
thx
June 12th, 2008 at 5:11 pm
orry it took so long to respond. I wrote about 10 days ago that it wouldn’t work for me in Firefox. I wasn’t totally correct. It works for me on Firefox at home, but not at work? Both are versions 2.0.0.2. I don’t know, maybe its some setting I have… Any ideas. I’m glad I can finally see it now in Firefox!
June 12th, 2008 at 10:23 pm
The slide down and slide back up looks interesting! You know what’s nice with your post? You explain and you involve your readers. You don’t leave us as mere readers but you also make us work.
June 13th, 2008 at 9:20 am
thank you
June 13th, 2008 at 6:59 pm
Very useful tutorial thanx.
June 13th, 2008 at 7:02 pm
Very good!
June 13th, 2008 at 11:09 pm
thank you
June 14th, 2008 at 3:26 pm
tenks elot ma nicht to them
June 17th, 2008 at 1:51 am
nice, thanks alot
June 17th, 2008 at 6:47 am
sohbet odaları
June 17th, 2008 at 1:01 pm
Great code Harry.
I’m using this in my asp.net website, but its stopping my buttons from triggering. Do you know why something in the script could be causing this?
Thanks,
Curt.
June 17th, 2008 at 1:07 pm
In response to my own comment, Ive now fixed the problem.
I was using this:
Now I’m using:
For some reason the first one doesn’t think it ends which messes up the .net javascript.
June 18th, 2008 at 3:58 am
thanxxx
June 19th, 2008 at 4:02 pm
thank you freind……………………
June 19th, 2008 at 4:05 pm
thanks you kardeş :DDDD
June 20th, 2008 at 6:37 am
thank you !
June 20th, 2008 at 6:38 am
thanks you kardeş :DDDD
June 20th, 2008 at 6:38 am
thanks y
June 21st, 2008 at 6:08 pm
thanked post
June 21st, 2008 at 6:09 pm
thanks you
June 22nd, 2008 at 9:23 am
allah razi olsun thanks
June 22nd, 2008 at 9:24 am
thanks you
June 22nd, 2008 at 7:30 pm
thanks
June 23rd, 2008 at 6:14 am
Fantastic script Harry!! However I seem to have stumbled on a problem. I had no problems implementing this in either IE or FF, i started using a ToggleSlide() type function to make it one button up and down… still no probs. I can’t however get it to work in IE when calling the Javascript function from a flash movie/button, but it does still work in FF.
June 23rd, 2008 at 6:16 am
Fantastic script Harry!! It is reaaly sound perfect. However I seem to have stumbled on a problem. I guess we wwill solve it.I had no problems implementing this in either IE or FF, i started using a ToggleSlide() type function to make it one button up and down… still no probs. I can’t however get it to work in IE when calling the Javascript function from a flash movie/button, but it does still work in FF.
June 23rd, 2008 at 6:18 am
Useful tips. We have really benefited from it.
June 23rd, 2008 at 6:19 am
We will use this precious information
June 23rd, 2008 at 6:24 am
good idea
June 23rd, 2008 at 7:17 am
php is king of all scripts
June 23rd, 2008 at 7:28 am
ververververy nice
June 23rd, 2008 at 9:34 am
cool thanks, is it working with all browsers?
June 23rd, 2008 at 12:00 pm
wow! its amazing.
June 24th, 2008 at 3:39 pm
http://www.forumbol.com
http://WwW.FoRuMBoL.CoM | 2oo8 | Türkiye’nin En BoL Forumu!
June 24th, 2008 at 4:31 pm
sohbet eğlence aşk meşk warez program chat forum
June 24th, 2008 at 4:46 pm
no follow
June 24th, 2008 at 4:51 pm
thanks so mucha
June 24th, 2008 at 6:35 pm
forum, sinema, müzik, edebiyat, kültur.
June 24th, 2008 at 6:39 pm
online knight knight online forum
June 24th, 2008 at 9:24 pm
Once you feel that there is a base of standards-competent developers, I would say it’s time to move on to IE.next.
http://www.mozillafirefoxindir.com/
June 25th, 2008 at 11:48 am
thank you
June 25th, 2008 at 4:44 pm
thank you
June 25th, 2008 at 7:04 pm
Ekonomi Haber
June 29th, 2008 at 12:14 am
thaks..
June 30th, 2008 at 9:10 am
Google recommends that you create a separate HTML ‘crawlable’ site that they can index - this is basically that same technique, but the HTML + Flash live together on the same page.
June 30th, 2008 at 10:58 am
Thx !
Camfrog Video Chat Forums http://www.undeadcf.info/
July 1st, 2008 at 9:30 am
rather than calling the style in the xhtml, ive tried to call it in a style sheet, but it doesn’t seem to work, any ideas? seems to be overwritten with element.style…
July 7th, 2008 at 9:13 pm
2iz dingiller o dilinizi kopartırım sizin
July 8th, 2008 at 9:54 am
For me, there’s only one rule to follow and that is, “Exercise FIRST thing in the morning.” Wake up, get into your workout gear and start straight away. Anything else, and you’ll procrastinate the day away.
July 10th, 2008 at 1:44 pm
Wow, it’s really cool that you can do this with CSS. I thought that everything on CSS had to remain static (besides liquid layout etc.) and things like this would rather go into the HTML or so that you were creating. I guess it makes sense that you could put it into CSS – that works a lot better in ensuring a common layout across the site. I’m really excited at the many more potentialities I see CSS producing.
July 11th, 2008 at 8:42 am
o that you were creating. I guess it makes sense that you could put it into CSS – that works a lot better in ensuring a common layout across the site. I’m really excited at the many more potentialities I see CSS producing.
July 11th, 2008 at 10:53 am
mutesem HTML or so that you were creating. I guess it makes sense that you could put it into CSS – that works a lot better in ensuring a common layout across the site. I’m really
July 13th, 2008 at 12:07 am
link bidding directory…
The TrackBack specification was created by Six Apart, who first implemented it in their Movable Type blogging software in August…
July 14th, 2008 at 2:27 pm
Nice script Harry. It works fine in all browsers but in Firefox, on slide up, I have a and the scrollbar remains on the screen after the div is closed. Any tips on how to make that disappear from the viewer as well?
July 16th, 2008 at 12:23 am
nice script bravo harry. good luck
July 16th, 2008 at 12:24 am
good luck very nice.
July 16th, 2008 at 12:24 am
thanks
July 21st, 2008 at 12:46 pm
thx for your plugin I am Blog
July 21st, 2008 at 12:53 pm
thanks.
July 21st, 2008 at 10:01 pm
qkocapbz rcwlfj wtokqjxeg sjenmt oqicgza slcihmvfn nkxv
July 24th, 2008 at 4:36 am
THANKS
July 24th, 2008 at 7:18 am
THANKS
July 24th, 2008 at 10:06 pm
Thanks very good
July 25th, 2008 at 2:05 am
thank you
July 25th, 2008 at 4:44 am
thanks your
July 26th, 2008 at 5:07 am
thank you
July 26th, 2008 at 5:53 am
thanks
July 26th, 2008 at 7:24 am
Great works.
Thank you
July 26th, 2008 at 9:19 am
thank you
July 26th, 2008 at 9:45 am
thanks
July 26th, 2008 at 2:40 pm
thanks a lot
July 28th, 2008 at 9:08 pm
Ask Siirleri
July 28th, 2008 at 9:08 pm
Ask Siirleri , MSN Nick
July 29th, 2008 at 3:57 am
prefabrik konut ev ve villa konusunda cok iyidir.
July 29th, 2008 at 10:03 am
eyw tenks emolar
July 29th, 2008 at 10:09 am
saol eyw tenks
July 30th, 2008 at 10:00 am
cool work!
July 30th, 2008 at 4:34 pm
thansk sites
July 31st, 2008 at 3:04 pm
Thank you
matematik
matematik
kpss
July 31st, 2008 at 3:06 pm
thank you
August 1st, 2008 at 3:16 pm
Great post, very detailed…
August 2nd, 2008 at 5:29 am
Hi there,
Nice script!! I’m loving it
but there is a problem with the dynamic height of the scrolled div.. I can’t get it
working… has someone got an good working example of the script with that
option added?
thnx for your help and harry thnx for the script!!!
August 3rd, 2008 at 1:20 am
I agreed with you
August 3rd, 2008 at 11:35 pm
thank you very nice article
August 4th, 2008 at 7:54 am
thanks
August 4th, 2008 at 2:13 pm
MSN NICK
August 6th, 2008 at 9:41 am
thanksss
August 9th, 2008 at 7:59 pm
thanks usefull
August 11th, 2008 at 5:02 am
but there is a problem with the dynamic height of the scrolled div.. I can’t get it
working… has someone got an good working example of the script with that
option added?
August 11th, 2008 at 5:03 am
thanks usefull
August 12th, 2008 at 3:56 am
do anyone know how to slide left and right….if than help me.its urgent
August 12th, 2008 at 4:33 am
thank you
August 12th, 2008 at 4:34 am
thanks
August 12th, 2008 at 4:35 am
thank you veryMuch
August 13th, 2008 at 3:07 am
Brilliant work! if only all ajax libraries were so small, effective and clearly explained!!
– beth
August 13th, 2008 at 1:36 pm
http://www.hicran.net/sohbet
August 14th, 2008 at 3:27 am
Nice script!! I’m loving it
August 19th, 2008 at 9:38 am
[...] bize nasıl yapıldığı aktarılan bu scripti buldum.Ancak biraz daha fonksiyonellik katılmış bu versiyonuda oldukça ilgimi [...]
August 19th, 2008 at 11:19 pm
thanks
August 20th, 2008 at 9:08 am
thanks a lot
August 22nd, 2008 at 7:35 am
thanx for nice share
August 26th, 2008 at 7:24 pm
kelebek
August 27th, 2008 at 6:31 am
Great tutorial. i always wonder how to do sliders like this. Thanks for billion times
August 27th, 2008 at 4:50 pm
This is beautiful. With a few tweaks I’ve got it working *almost* exactly as I envisioned it.
I just wish I was able to work out how to reveal the content UPWARDS, and collapse downwards… I can see others have wondered similar but I can’t see any solutions here.
Anyone have any ideas?
Otherwise: brilliant.
August 29th, 2008 at 4:53 am
thank you
August 30th, 2008 at 3:04 am
thanx for nice share
August 30th, 2008 at 4:46 pm
Thanks you
August 30th, 2008 at 4:46 pm
mucuks thanks
August 30th, 2008 at 4:47 pm
by gonyalı cok ii buuuuuuuu
August 30th, 2008 at 4:48 pm
Konya portalı
August 31st, 2008 at 1:01 am
nice article thanks…
August 31st, 2008 at 8:53 pm
Hi! Thanks for the explanation of the code. I tried to follow it to make some changes, but I failed. Can you explain me how to do the slide thing, not for a link that calls the function, but for the on load statement inside the body tag? (I don’t know if thats the right way to say it; what I want is that some div elements apear sliding)
Thanks again.
August 31st, 2008 at 9:02 pm
the thing is, I think, that blogger don’t accept the specification of the objet in the onload statemet inside de body tag… is it? What can I do?
September 1st, 2008 at 4:39 am
its very good project.
September 1st, 2008 at 10:53 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
September 2nd, 2008 at 4:10 pm
Cool thx.
I have seen some like this on tjis website
http://www.redtube.to
September 2nd, 2008 at 5:18 pm
Nice one, it will be nice to wipe “mydiv” horizontal too
September 3rd, 2008 at 4:57 am
The web design is a sensitive area. The functionality defines limits but knowing these we have enough freedom to be creative. Most clients are looking for original and unique layout designs. In such cases, creativity is an absolute must. Even an artistic touch can be helpful…
thanks.
September 3rd, 2008 at 5:20 am
The web design is a sensitive area. The functionality defines limits but knowing these we have enough freedom to be creative. Most clients are looking for original and unique layout designs
September 3rd, 2008 at 5:47 am
The web design is a sensitive area. The functionality defines limits but knowing these we have enough freedom to be creative.
September 3rd, 2008 at 5:48 am
thank yu
September 4th, 2008 at 10:21 pm
this is cool.. thanks for the script
September 5th, 2008 at 4:33 am
I would think a hosting company would want their customers making money off their websites, so they would continue host through them and potentially buy more hosting through them.
September 7th, 2008 at 11:03 pm
Thanks
September 7th, 2008 at 11:04 pm
hi all.
September 8th, 2008 at 9:24 am
Awesomeness dude.
September 8th, 2008 at 10:02 am
great code thansk….
September 9th, 2008 at 9:06 pm
thangyou
September 9th, 2008 at 9:07 pm
thang you veri god.
September 9th, 2008 at 9:08 pm
thanggg veri iyi
September 10th, 2008 at 10:28 am
Thanks
September 10th, 2008 at 1:24 pm
thank you
September 11th, 2008 at 9:09 am
great code thank you
September 11th, 2008 at 9:53 pm
thanks for code
September 12th, 2008 at 3:50 pm
thanks you
September 14th, 2008 at 10:14 am
sohbet chat felan thanx
September 14th, 2008 at 10:15 am
youtube very cool
türkçe mirc
September 15th, 2008 at 3:53 am
chat
September 15th, 2008 at 5:32 pm
sohbet, sohpet
September 16th, 2008 at 5:37 am
thank you.
September 16th, 2008 at 3:39 pm
thank you.
September 16th, 2008 at 3:40 pm
thanksss
September 16th, 2008 at 3:40 pm
thanksss You
September 19th, 2008 at 9:48 pm
Celebrity Magazine
September 20th, 2008 at 7:21 am
Thanks you
September 20th, 2008 at 12:17 pm
irc, ırc
September 20th, 2008 at 12:31 pm
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
September 22nd, 2008 at 11:01 am
thank you
September 25th, 2008 at 3:41 am
good…
September 25th, 2008 at 3:46 pm
Thank You!
sxe download
September 27th, 2008 at 10:52 am
yes ay dou nat fuor
September 27th, 2008 at 10:54 am
for güüt be saenmbsi
September 29th, 2008 at 10:44 am
thanks
September 29th, 2008 at 5:12 pm
Thanks Harry, for those of you trying out Olivier Suritz dynamic height fix. Here it is, CORRECTED.
function startslide(objname){
obj[objname] = document.getElementById(objname);
if(dir[objname] == “down”){
obj[objname].style.height = “1px”;
}
obj[objname].style.display = “block”;
startTime[objname] = (new Date()).getTime();
endHeight[objname] = obj[objname].scrollHeight;
timerID[objname] = setInterval(’slidetick(\” + objname + ‘\’);’,timerlen);
}
September 29th, 2008 at 6:23 pm
thanks site admin.
September 29th, 2008 at 8:33 pm
Nice , works great
September 30th, 2008 at 2:59 am
Thank you.makale.
Http://ismailyksohbet.bloggum.com
October 2nd, 2008 at 8:45 am
Has any one figured out how to set this to remain the same when visitors visit other pages.
For example. I have my DIV open with an option to close. However, if you decided to close the DIV and then click on a link to another page on the site, the DIV will become open again.
How can it be done so the DIV remembers the choice from the last page???
October 4th, 2008 at 8:55 am
Thanks.
This is my site http://www.657liyiz.biz
sendika,catia,aöf,657
October 5th, 2008 at 6:23 am
thanks..
October 6th, 2008 at 10:37 am
Wonderful Stuff you post!! I LOVE it!
October 7th, 2008 at 3:09 pm
It dosn’t seem to work for me! Must be doing it wrong …
—
http://www.nervouscop.com/
October 8th, 2008 at 5:29 am
Wonderful Stuff you post!! I LOVE it!
October 8th, 2008 at 2:03 pm
Sohbet
thanks you site owner
October 10th, 2008 at 4:33 am
thanks you site owner
October 11th, 2008 at 2:41 am
thanks youuuuuu
October 15th, 2008 at 1:57 pm
thanks you site owner
October 18th, 2008 at 3:21 pm
thanks my friend
October 19th, 2008 at 6:26 am
thanks
October 20th, 2008 at 3:02 am
It works fine in all browsers but in Firefox, on slide up, I have a and the scrollbar remains on the screen after the div is closed. Any tips on how to make that disappear from the viewer as well?
October 21st, 2008 at 7:31 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
October 25th, 2008 at 5:34 pm
Thanks…
This is my web site
http://www.encilginforum.com
October 28th, 2008 at 5:42 am
Excelente, pero en Firefox pega varios pantallazos cuando se ha incluido un flash en el interior del div, lo que hace un efecto antiestético. Eso si, en IE funciona el movimiento del div con un flash oculto sin problemas. Otro detalle es que en IE el flash incluido en el div se mantiene funcionando, entanto que en Firefox se reinicia cada vez que se abre el div….
eso puessss, greetings =P
October 30th, 2008 at 11:07 am
ty.
October 31st, 2008 at 12:27 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
October 31st, 2008 at 3:50 pm
thanks man good work
October 31st, 2008 at 3:51 pm
thans man
November 1st, 2008 at 5:12 am
whoa.. that is cool
November 1st, 2008 at 12:26 pm
Thanks…
This is my web site
November 1st, 2008 at 12:27 pm
Thanks…
This is my web site
http://www.koparmaca.com
November 6th, 2008 at 5:27 am
wanna learn java script now
November 6th, 2008 at 12:47 pm
Changing the function startslide by the following makes it work with dynamic height.
DO NOT COPY / PASTE THAT’S WHY IT DOESN’T WORK
start from the orgininal, it’s just a couple of lines to modify:
function startslide(objname){
obj[objname] = document.getElementById(objname);
obj[objname].style.display = “block”;
endHeight[objname] = parseInt(obj[objname].offsetHeight);
obj[objname].style.display = “none”;
startTime[objname] = (new Date()).getTime();
if(dir[objname] == “down”){
obj[objname].style.height = “1px”;
}
obj[objname].style.display = “block”;
timerID[objname] = setInterval(’slidetick(\” + objname + ‘\’);’,timerlen);
}
November 7th, 2008 at 8:50 am
Thanks.. good
November 8th, 2008 at 11:27 am
hi
really very good work , i just have a problem i need to use this function for making sliding menu , my problem is that when i navigate form menu item to another the divs of the sub menus appears overlapped and i need to avoid this overlapping
November 9th, 2008 at 11:08 pm
thanks, hero
November 9th, 2008 at 11:09 pm
Sohbet
November 11th, 2008 at 1:23 pm
Thanks You Klas
November 11th, 2008 at 1:24 pm
Thanksyou
November 11th, 2008 at 1:25 pm
Thnaskyou
November 11th, 2008 at 1:26 pm
yaoashasajaksajshabbs
November 11th, 2008 at 1:26 pm
Thanksyou Tree
November 11th, 2008 at 1:29 pm
ThanksyouAre
November 11th, 2008 at 1:30 pm
ThanksYouTree
November 11th, 2008 at 1:30 pm
Thanksyoueeaas
November 11th, 2008 at 8:11 pm
thanks for the information
November 14th, 2008 at 9:26 am
great code thanks
November 14th, 2008 at 5:50 pm
thanks
November 15th, 2008 at 8:04 am
thak you.
November 15th, 2008 at 8:16 am
wanna learn java script now
November 16th, 2008 at 6:45 am
thanx for great work
November 16th, 2008 at 7:30 am
Thanks for post
November 16th, 2008 at 9:19 pm
thanx that example
November 17th, 2008 at 12:08 pm
Diyet Yemek Tarifleri Listeleri
love harrymaugans
November 19th, 2008 at 12:56 am
You, sir, are a gentleman and a coder.
Thank you for this lucid and clear explanation of animating div disclosures with Javascript and CSS.
November 19th, 2008 at 8:57 pm
thanks for the information
November 20th, 2008 at 9:05 am
sex shop
November 21st, 2008 at 6:27 pm
great entry
November 22nd, 2008 at 10:56 am
Good Post. Thanks very much
December 4th, 2008 at 5:20 am
Thanks for the post, its a nice piece of code
December 4th, 2008 at 3:10 pm
At http://thewebdesignblog.net/archives/22 this script is modified for the one click slide, plus/minus images and also dynamic height for FireFox and IE!
Basically, it has everything this script should have and works great! Head over there!
December 7th, 2008 at 7:23 pm
thanks
December 11th, 2008 at 3:57 pm
Thanks
December 11th, 2008 at 3:58 pm
good blog thank you
December 11th, 2008 at 3:59 pm
Thank You Very Much
December 11th, 2008 at 4:00 pm
Good.
December 11th, 2008 at 4:00 pm
teşekkürler.
December 11th, 2008 at 4:01 pm
Çok Güzel olmuş…
December 11th, 2008 at 4:02 pm
Thankkksss :D:D:D:D
December 11th, 2008 at 4:02 pm
Teşekkür…
December 11th, 2008 at 4:03 pm
Perfect
December 11th, 2008 at 4:04 pm
Good
December 11th, 2008 at 4:05 pm
hmm ?_?_?_?
December 11th, 2008 at 4:06 pm
çok güzel
December 11th, 2008 at 4:07 pm
baya güzel olmuş.kalemine destek
December 11th, 2008 at 8:56 pm
Hi .. i wish to add a function to the js file to close a previous expanded div .. so that only 1 div is expanded at any time.
Could someone please suggest some code for this function?
Many thanks.
December 13th, 2008 at 1:15 pm
thanks youu
December 13th, 2008 at 1:16 pm
expanded at any time
December 14th, 2008 at 3:01 am
Ok, I asked that question a little prematurely as i hadn’t read through all the content. But I do now have a complete working menu that works fine in FF IE^ and IE7, but not in Safari ?? the menu is there, but nothing expands at all ??
Here is a link to the site in question which is for a client due next week: http://www.dev4u.com.au/staging/alpha/index.html
Any ideas greatly appreciated. What I have altered is I moved the window.onload function out of the head of the page, and now call it from external js. Aslo the menu will be on multiple pages, so i also moved it out into external js and use document.write to retrieve it. Hope that helps.
Thanks.
December 14th, 2008 at 2:49 pm
thank you
December 17th, 2008 at 1:48 am
Great code! Have a quick question - I have a handful of SPAN tags in my div. Works fine when showing the div, but when hiding, the SPAN sections stay visible until the parent DIV is finished sliding up to close. Any way around this?
Thanks again!
December 19th, 2008 at 1:11 pm
this is the code i put on my page
Slide Down
This is a test!
Can you see me?
now when i click on slide down nothing happens whats the problr,?
December 19th, 2008 at 6:02 pm
how do i do this on blogger?
December 20th, 2008 at 12:52 am
ok i found the problem…
when you preview it dosent inlude stuff from template so the motion pack.js wasnt included…
December 20th, 2008 at 3:17 am
when you preview it dosent inlude stuff from template so the motion pack.js wasnt included…
December 20th, 2008 at 10:19 am
thanks for the infoo
December 21st, 2008 at 6:45 am
thank you oyun oyunlar dinamikoyun oyunu
December 21st, 2008 at 6:47 am
thank you dinamikoyun oyunu oyun oyna
December 22nd, 2008 at 2:31 pm
thank you
December 22nd, 2008 at 2:32 pm
thanks
December 22nd, 2008 at 2:35 pm
best blog
December 22nd, 2008 at 2:42 pm
tahnk you turkey
December 22nd, 2008 at 2:43 pm
hello
December 22nd, 2008 at 2:44 pm
the best blog thanks
December 22nd, 2008 at 5:23 pm
very very thanx
December 22nd, 2008 at 5:24 pm
cool blog…