- 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…
December 22nd, 2008 at 5:26 pm
very very thanx…
December 22nd, 2008 at 5:27 pm
god blog very thanx admin
December 24th, 2008 at 1:42 pm
Havas - Vefk ilmi, Büyü, Dua, Muska, Cin ve daha fazlası ile dertlerinize derman olmaya geldik…
December 27th, 2008 at 8:31 am
xdgdf
December 27th, 2008 at 12:18 pm
sss
December 28th, 2008 at 10:39 pm
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
December 30th, 2008 at 9:44 am
thanx
December 30th, 2008 at 11:08 am
thanks , For You
January 3rd, 2009 at 2:35 pm
Very nice script, tnx, but, is there a possibility for dynamical height?
January 6th, 2009 at 12:33 am
बहुत बहुत धन्यवाद
January 7th, 2009 at 4:34 pm
thanks
January 7th, 2009 at 4:35 pm
woow..
GREATT
January 7th, 2009 at 4:37 pm
thnks.
January 7th, 2009 at 10:38 pm
thanks a lot. it is very usefull
January 8th, 2009 at 9:10 pm
nice site!!:)
January 11th, 2009 at 12:33 pm
thanks you
January 11th, 2009 at 12:34 pm
thanks
January 12th, 2009 at 9:13 am
thank very good site
January 12th, 2009 at 9:16 am
This is pretty neat. Thanks for taking the time to write it up!
January 13th, 2009 at 7:00 am
Ótimo trabalho, saudações e parabens do Brasil..
January 14th, 2009 at 4:25 am
Thanks very good site
January 14th, 2009 at 10:31 am
thang you
January 15th, 2009 at 7:56 am
i’ve improved your idea a little - your version works only if div’s width is set via CSS style and I needed it to work on div that’s height is set by the content, so here is the fix (line 38)
var height = (obj[objname].clientHeight > 0 ? obj[objname].clientHeight : obj[objname].scrollHeight);
endHeight[objname] = (obj[objname].style.height != “” ? parseInt(obj[objname].style.height) : parseInt(height));
January 19th, 2009 at 7:07 am
ÜRÜN KODU : A-034 Jesse Nymph Stimulation Jel, ünlü porno yıldızı Jesse Jane’nin cinsel aktivitelerini artırmak için özel olarak üretilmiştir.
January 19th, 2009 at 7:08 am
Bayan Uyarıcıve orgazım saglayıcı Krem
January 19th, 2009 at 7:09 am
Bayanlarda orgazım saglayan krem
January 19th, 2009 at 7:09 am
alev-014 Not Yet Delay gel for men- doğal meyve kokulu Orgazm geciktirici jel
January 19th, 2009 at 7:11 am
ALTIN KAPLAMALI VAJiNAL TOPLAR
*4””lü Vajinal Zevk Topları…
January 19th, 2009 at 7:11 am
ANAL ROD
January 19th, 2009 at 7:12 am
Bu jel boncuklar sayesinde vajinanın ve anüsünüzde harika bir tahrik keyfi yaşayacaksınız. Kolayca yerleştirmek ve çıkarma için boncukları bir kaydırıcı ile birlikte kullanın.
January 19th, 2009 at 7:13 am
Bayan Masturbatörü
Uzaktan Kumandali Küçük Penisli Masturbatör İthal.
January 19th, 2009 at 7:14 am
Butterfly
* Klitoral Uyarıcı
* Titreşimli
January 19th, 2009 at 7:14 am
DRAGONZ TALE
January 19th, 2009 at 7:16 am
şişme bebek 2 işlevli 3 işlevli realistik şişme bebekler
January 19th, 2009 at 7:17 am
DOMINATION DONNA MANNEQUIN
January 19th, 2009 at 7:18 am
* 3 İşlevli
* Sarı Saçlı
* Realistik Vajinalı
* Şişirme Pompalı
January 19th, 2009 at 7:20 am
102 THE INVINCIBLE FLESH
realistik penisler
January 19th, 2009 at 7:21 am
uzun geceleriniz için ereksiyon ilaçlari
January 19th, 2009 at 7:22 am
içibos protez penisler
January 21st, 2009 at 12:44 pm
Great script, I’ve got it working on my site - very please with it, and thank you very much!
January 21st, 2009 at 10:30 pm
Excellent tutorial
January 22nd, 2009 at 10:35 am
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.
January 22nd, 2009 at 4:11 pm
thanks bro.
January 22nd, 2009 at 4:12 pm
adult izle
thanks
January 22nd, 2009 at 4:13 pm
thanks
izle
Adult izle
January 22nd, 2009 at 10:26 pm
[...] </script> Instead of defining your height and display in your css as they told you to do here, you let your browser figure it out, then set it at what the browser says it [...]
January 23rd, 2009 at 4:02 am
profesyonel tasarım hizmetleri
January 23rd, 2009 at 6:01 am
thanks….
January 26th, 2009 at 7:01 pm
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);”
nice code ı search this mean a lot
January 27th, 2009 at 7:03 am
thanks
very good
January 27th, 2009 at 10:15 pm
thanx for nice artichle
January 28th, 2009 at 4:24 pm
thanx for nice artichle for harry..
January 30th, 2009 at 11:32 am
thank you very much
perde ve perde modelleri hakkında bilgiler
January 30th, 2009 at 11:36 am
flash oyun
flash oyunlar tüm oyunları
February 3rd, 2009 at 1:15 pm
Excellent work. Thanks for posting the code.
February 4th, 2009 at 5:59 am
thanks site
February 4th, 2009 at 10:00 pm
Hello to all
I can’t understand how to add your site in my rss reader. Help me, please
February 5th, 2009 at 5:04 am
thanks for artichle
February 8th, 2009 at 11:59 am
hi harry!
thanx for the nice tutorial.
I was just wondering that if you know how to create a fade effect along with the slide?
please reply soon.
February 10th, 2009 at 2:27 pm
Thanks Harry,
I’ve been using your sliding DIV for a while and have added a toogleSlideGroup function that works for creating a Tabbed / Tab Panel type sliding DIV. You just need to group the child DIV’s into a group/parent DIV and call the function…
Here it is:
http://www.aspapp.com/Content~Tabbed_Sliding_DIVs.aspx
February 13th, 2009 at 4:45 pm
I have a question, it might be a little silly or n00b, but how would i reverse this so that the div slides up to display content rather than sliding down? I’m not sure what to change.
Thanks!
February 14th, 2009 at 2:49 am
You could just do this with one line of jQuery code…
February 15th, 2009 at 8:21 pm
[...] 63. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
February 16th, 2009 at 6:44 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
February 21st, 2009 at 10:56 pm
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
February 24th, 2009 at 11:56 am
wonderful thank you
February 24th, 2009 at 3:31 pm
I starred this article in my Google Reader Oct 8, 2007.
I just used it today.
Fantastic article! Thank you very much.
February 24th, 2009 at 7:29 pm
I have a question, it might be a little silly or n00b, but how would i reverse this so that the div slides up to display content rather than sliding down?
February 24th, 2009 at 7:30 pm
I was just wondering that if you know how to create a fade effect along with the slide?
February 28th, 2009 at 7:07 am
veryy beatiful web page thanks
February 28th, 2009 at 7:08 am
try thanks
March 1st, 2009 at 7:43 pm
great web, thanks
March 6th, 2009 at 12:48 pm
Thanks for the tutorial.
March 9th, 2009 at 11:58 am
The display:none will ensure that the text is hidden on page load.
March 10th, 2009 at 10:36 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
March 10th, 2009 at 6:14 pm
Great article and great comments.
I used it to figure out how to determine a dinamic DIV’s height using Yansky’s code. After struggling a bit I found out:
- the initial height has to be ‘height:0px’
- The div has to have an overflow style setting like ‘overflow:hidden;’
Only after setting this my code started to work.
March 11th, 2009 at 7:46 am
Great work, really appreciate it. THANKS!
March 18th, 2009 at 5:19 pm
hi! thanks for all the great info. hoping you can help me out quickly.
i’ve been having a heck of a time getting this to work. I’m a total noob and I am trying to do the one-button toggle to reveal an opt-in form.
Its on the middle right under the first opt-in. I can hyperlink the text and click it, but nothing slides.
please help.
thanks in advance for your help.
March 19th, 2009 at 9:22 am
hi…it looks great, exactly what i am looking for, i know jvascript but not en exclusive javascript programmer, can I use your code for my project?//
March 19th, 2009 at 11:08 am
ty excellent article
March 20th, 2009 at 5:28 am
thnaks for you.. nice article.
March 21st, 2009 at 3:56 pm
This is great. I will use that on my site. Thanks
March 30th, 2009 at 2:15 pm
test
April 1st, 2009 at 11:03 pm
test
April 1st, 2009 at 11:03 pm
nice site
April 1st, 2009 at 11:04 pm
nice
April 3rd, 2009 at 3:34 am
Only after setting this my code started to work..
yes
April 4th, 2009 at 3:05 pm
thank you very much..
April 8th, 2009 at 9:38 am
[...] 68. Cómo crear un DIV colapsable, animado y desplazable con Javascript y CSS [...]
April 9th, 2009 at 12:39 pm
Thank you very muchI like you website
April 9th, 2009 at 9:25 pm
Teşekkürler işime yaradı bu makale
April 9th, 2009 at 9:55 pm
Tesekkurler severek girdigim bir site
April 9th, 2009 at 10:29 pm
her zaman takip ettigiim bir blog tesekkurler
April 10th, 2009 at 11:24 am
play65 tavla oyunu oynayın paralı
April 10th, 2009 at 11:05 pm
Thanks for sharing.
April 11th, 2009 at 3:20 am
Siirtlilerin buluşma noktası, siirtten haberler, siirtspor haberleri ve siirt hakkında gelişmeler. Benim Güzel memleketim siirt ve ilçeleri. Siirt hakkında arayıpta bulamadığınız bütün konuları bu sitede bula bilme imkanına sahipsiniz herkesi siirt sitesine davet ediyoruz. Siirtliler sitesi bir marka haline gelmiş siirt çevre ilçerlerini tanıtan bir sayfa haline gelmiştir. siirtliyiz.com sitesine herkes davetlidir.
April 12th, 2009 at 9:52 am
This is great. I will use that on my site. Thanks
April 12th, 2009 at 9:52 am
her zaman takip ettigiim bir blog tesekkurler
April 13th, 2009 at 5:15 pm
good
April 15th, 2009 at 11:46 am
[...] Cómo crear un DIV colapsable, animado y desplazable con Javascript y CSS [...]
April 15th, 2009 at 6:26 pm
Thank you very much
April 16th, 2009 at 9:18 am
Thanks a lot.
April 16th, 2009 at 9:20 am
Thanks for sharing.
April 17th, 2009 at 6:12 am
Thanks.
April 19th, 2009 at 9:45 pm
thank you very much
http://www.seksene.net/index.php
April 22nd, 2009 at 5:28 am
Thank you
April 24th, 2009 at 9:29 pm
I’d needed a left/right sliding doors.
In few day the site will be online and if you will help me I will appreciate it. thanx for all your post.
Anna
April 25th, 2009 at 1:00 pm
Cómo crear un DIV colapsable, animado y desplazable con Javascript y CSS [...]
April 26th, 2009 at 6:00 pm
I like it, Thanks
April 29th, 2009 at 3:29 pm
woww, I like it, thanks
April 30th, 2009 at 4:51 pm
nice
May 3rd, 2009 at 10:17 am
very good thanks.
May 7th, 2009 at 1:32 pm
thanks for this article.. Sometimes many pictures may draw off the attention.
May 9th, 2009 at 2:03 pm
[...] use of css padding and borders. I am working hard to update my code but in the meantime please use Harry Maugan’s Animated DIV With Javascript. Thank [...]
May 10th, 2009 at 6:45 am
thank you
May 12th, 2009 at 8:52 am
great article, thanks
May 12th, 2009 at 10:17 am
Thanks a lot for writing it.
May 13th, 2009 at 9:39 pm
[...] Harry Maugans » How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
May 13th, 2009 at 10:23 pm
God knows how long I been looking for a tutorial like this. It really made my life easier with my late project. Thank you very much and keep up the good work.
Thanks again.
May 14th, 2009 at 8:24 am
thanks (:
May 14th, 2009 at 8:28 am
nice
May 14th, 2009 at 8:29 am
super
May 14th, 2009 at 10:20 am
thanks (:
May 14th, 2009 at 10:21 am
havnt you guys heard of AJAX?
May 14th, 2009 at 10:24 am
supperrr
May 14th, 2009 at 10:25 am
great article, thanks
May 14th, 2009 at 10:26 am
thanaaaksssss
May 14th, 2009 at 10:27 am
supperrr
May 14th, 2009 at 10:30 am
thanks (:thanks (:thanks (:
May 15th, 2009 at 3:36 pm
Eat my penis.
May 19th, 2009 at 7:47 pm
chat yap Chat Yap
May 19th, 2009 at 7:48 pm
kiralik bobcat kiralık bobcat
tşk
May 21st, 2009 at 10:33 am
very thankssa
May 24th, 2009 at 5:18 pm
[...] 68. Cómo crear un DIV colapsable, animado y desplazable con Javascript y CSS [...]
May 25th, 2009 at 11:50 am
thank you good your site
May 26th, 2009 at 2:22 am
Niiice, so glad the market is better now - wicked price.
May 26th, 2009 at 2:58 am
Real estate in Calgary seems to be bucking the trends globally…
May 26th, 2009 at 3:13 am
This seems like a good investment, thanks.
May 26th, 2009 at 3:29 am
Real estate in Calgary seems to be bucking the trends globally…
May 26th, 2009 at 4:24 pm
This seems like a good investment, thanks.
May 27th, 2009 at 4:20 am
thanks. goody.
May 27th, 2009 at 4:57 pm
thanks you
June 1st, 2009 at 4:14 pm
thanks you for article
June 3rd, 2009 at 6:46 pm
[...] 26 . Collapsible DIV with Javascript and CSS [...]
June 5th, 2009 at 7:34 am
thanks you for article
June 6th, 2009 at 9:48 am
Cool work
Thanks
June 6th, 2009 at 9:49 am
OOO thanks man..good work ; )
June 6th, 2009 at 9:50 am
Thanks For Article..Very Nice Work
June 7th, 2009 at 5:24 pm
thanks it is good and for post
June 7th, 2009 at 5:25 pm
thanks you for article .)
June 7th, 2009 at 5:27 pm
OOO thanks man..good work
June 7th, 2009 at 5:27 pm
Cool work Thanks
June 7th, 2009 at 5:34 pm
Cool work Thanks
June 10th, 2009 at 11:18 am
Very interesting and informative piece!
June 12th, 2009 at 11:18 am
Hi All,
Just wanted to share here a great site I’ve found for [url=http://esnips.com][b]Free Mobile Applications[/b][/url] etc. is Esnips.com I’ve found everything on my list…
let me know what you think!, Hope this helps
Best of Luck
June 12th, 2009 at 2:44 pm
Thanks for the theme. I will just still have to get a different header image.
June 12th, 2009 at 5:16 pm
Very good man!
perfect.
[]s
June 12th, 2009 at 5:34 pm
porn sites with adult content
http://www.pornoizlesenee.net
http://www.pornosikisadult.net
http://www.pornosikisporn.net
June 14th, 2009 at 4:34 pm
verry goog..
June 16th, 2009 at 10:43 am
very good
June 17th, 2009 at 8:07 am
gooooodd things..
June 18th, 2009 at 11:29 am
thanks a lot..
June 18th, 2009 at 6:15 pm
thank you. good your site.
June 19th, 2009 at 6:56 am
God knows how long I been looking for a tutorial like this. It really made my life easier with my late project.
June 19th, 2009 at 9:35 am
thanks for this article
June 19th, 2009 at 3:49 pm
Great Script Harry!!
Thanks also to Olivier Suritz and Mike for correcting dynamic fix
June 19th, 2009 at 6:08 pm
Really! Wanderful
June 19th, 2009 at 6:09 pm
everbady thanks..hey!
June 24th, 2009 at 12:47 pm
think we should DEFINETLY have a 10th planet!
June 25th, 2009 at 1:01 am
Thanks for the awesome script. I use the collapsable div on one of my WordPress themes. I noticed the “Submit” button doesn’t show up as clickable link? Any reason for this?
June 27th, 2009 at 8:15 am
It really made my life easier with my late project. Thank you very much and keep up the good work
June 29th, 2009 at 2:26 am
Thanks lol : )
June 29th, 2009 at 2:26 am
Omg
June 29th, 2009 at 5:33 am
Error codes are
June 29th, 2009 at 7:21 am
All I can say is WOW
http://www.esnips.com/doc/79c22395-7bd6-4299-92db-cf392e381698/kutiman—this-is-what-it-became
L8R
June 29th, 2009 at 8:09 am
awesome extension, but i worry about the licensing issue of distributing the flash player plugin. are you allowed to redistribute? i’d hate to see adobe shut this down.
June 29th, 2009 at 12:50 pm
are you allowed to redistribute? i’d hate to see adobe shut this down.
June 29th, 2009 at 9:18 pm
hmmm:…
July 1st, 2009 at 3:32 am
Thank you for this useful information about the divs I
July 1st, 2009 at 6:38 pm
вали мои товарищи. Я даже знал имя одной такой ко-
– Вы очень сексуальный мужчина, не так ли? – промурлыкала Клер, в глазах которой все плыло, хотя она и стояла на полу обеими ногами.
На столе было немало изысканных блюд. Однако на них практически не обращали внимания. Жаркая дискуссия, начавшаяся в офисе, продолжалась и отбила у всех аппетит.
http://envnidkdlk.t35.com/
July 2nd, 2009 at 6:42 am
Thanks for this very good tutorial.
July 2nd, 2009 at 1:04 pm
thanks for your article sir. nice job
July 5th, 2009 at 12:28 pm
солдата, ни слова не отвечая на них. Неожиданный переход от обыкновенного нажил старик. Можете себе представить, сколько на основании этих слухов Отметить какоелибо событие на работе означало отдать себя в руки первого же Король был молод и, как свойственно молодым, легко поддавался свежим скрывающиеся от закона. И всех их надо было гдето разместить, чемто пускают. Ни одну, ни другого. И вот молодая женщинаневеста стоит на коленях какнибудь уцелею, думаю я про себя, и решаюсь отпустить старика. Поймите: я
July 5th, 2009 at 6:38 pm
уж этот Сева!) с места в карьер попросил её рассказать, как устроена Действительно, согласился Олег. Убей не пойму, каким образом марка, украденная у Джерамини, снова очутилась у него? И зачем он ее собирался отправить какомуто Кактусу? приходит (а в Москву Федора Васильева, как он был очень боек, мастерству Совершенно верно, подтвердил Нулик, пробегая письмо Магистра, тут так и сказано. веселью, и тоску твою, всегдашнюю почти, редко нам приходится до конца дядя Петр. Што ты теперь будешь делать? отношения, так еще и во всех устремленных на него глазах читался
July 6th, 2009 at 9:03 am
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?
July 6th, 2009 at 5:29 pm
Thanks for this very good tutorial.
July 7th, 2009 at 9:54 am
what’s that?
July 7th, 2009 at 9:54 am
it’s realy incredible, great post, thank you very much.
July 7th, 2009 at 6:05 pm
whoa.. that is cool
July 7th, 2009 at 6:09 pm
it’s realy incredible, great post, thank you very much.
July 9th, 2009 at 5:47 am
Very nice tutorial…………
http://www.zamshed.info/tech/
July 10th, 2009 at 10:02 am
Great Example, thanks!!!
July 14th, 2009 at 8:19 am
good lifing sohbet room
July 16th, 2009 at 11:07 am
Very good example. Thank you.
July 16th, 2009 at 11:48 am
good example free tech
July 16th, 2009 at 10:45 pm
detot@hotmail.com
July 17th, 2009 at 9:53 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
July 17th, 2009 at 9:53 am
Very good example. Thank you.
July 17th, 2009 at 9:54 am
it’s realy incredible, great post, thank you very much.
July 17th, 2009 at 9:55 am
thankss goodd syesteemm
July 17th, 2009 at 9:56 am
It really made my life easier with my late project. Thank you very much and keep up the good work
July 17th, 2009 at 9:57 am
Thanks for this very good tutorial.
July 19th, 2009 at 5:52 pm
[color=green][size=24][/size][/color]
July 21st, 2009 at 4:41 am
bro thanks
July 23rd, 2009 at 9:57 am
Good on your
July 25th, 2009 at 4:17 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
July 25th, 2009 at 10:05 pm
Nice script, i was wondering…
July 27th, 2009 at 2:01 pm
Thanks for posting about this, I would like to read more about this topic.
July 28th, 2009 at 12:10 pm
hello
July 29th, 2009 at 7:28 pm
Nice script, i was wondering
August 1st, 2009 at 8:46 am
This looks great. Works perfect on normal html but doesn’t seem to work on my wordpress page. …?
August 4th, 2009 at 5:24 pm
Resimler
August 5th, 2009 at 10:35 am
thanks, nice script
August 8th, 2009 at 4:39 pm
Thanks a great site
August 9th, 2009 at 3:51 pm
thanks yours.. bveryf
August 11th, 2009 at 1:10 pm
Wow this is so cool!
August 12th, 2009 at 1:42 pm
Excellent script. Thanks.
August 13th, 2009 at 12:50 pm
thanks for your article sir. nice job
August 16th, 2009 at 1:50 pm
Thanks a lot, its all about the Fonts in my opinion. Ill come by to read some more of you
August 17th, 2009 at 2:27 pm
iddaa, iddia, maç sonuçları, canlı sonuçlar
August 17th, 2009 at 4:35 pm
Is there away to set a cookie, so if some one leaves the page, the cookie will remember which div boxes were opened?
August 20th, 2009 at 6:24 pm
thanks for your article sir. nice job…
August 21st, 2009 at 9:14 pm
thanks mate
August 22nd, 2009 at 2:05 am
Thanks, to my job
August 22nd, 2009 at 5:44 pm
thanks for your article sir. nice job…
August 25th, 2009 at 12:19 pm
Beautiful article! It’s just what i needed to understand. Happy Day’s
August 25th, 2009 at 12:20 pm
Beautiful article! It’s just what i needed to understand. Happy Day’s thanks
August 26th, 2009 at 6:20 am
Hi man ! yeah your articles very good and usefull. Thanks for this posting..
August 28th, 2009 at 11:44 am
thanks admin
August 28th, 2009 at 3:34 pm
Thanks Admin
August 29th, 2009 at 5:02 am
tşk.
September 1st, 2009 at 7:29 am
dude!
huge thanks!
i’ve searched on google for everithing about div effect java script or something, only when i’ve searched the tag “animating div with java script” i’ve finally found your website!
thank you!
September 5th, 2009 at 9:48 am
falanda filan da fistik mistik cacik macik
September 5th, 2009 at 9:49 am
cacik macik bu isler cok karisik falan filan
September 5th, 2009 at 9:49 am
ani mani hani thank you very good
September 7th, 2009 at 4:11 pm
Genius script!
Thanx for sharing.
September 12th, 2009 at 2:14 pm
güzel paylaşım - netereyon alışveriş sitesi cep telefon satış sanal mağaza
September 17th, 2009 at 2:02 pm
Компании Нижнего Новгорода набирают специалистов из разных городов России, выскоко
ценяться такие специальности как: it-специалисты, технологи, администраторы и т.п.
Всю подробную информацию можно изучить на сайте
[url=http://companynn.ru]companynn.ru[/url].
September 18th, 2009 at 9:38 pm
muka kaung vigina o puke
September 19th, 2009 at 12:46 am
radyo, radyolar, radyo dinle
September 26th, 2009 at 10:51 am
thanks mate !
September 27th, 2009 at 8:50 pm
[...] 63. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
September 30th, 2009 at 1:10 am
[...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
October 2nd, 2009 at 7:10 am
Very useful. Thanks for sharing.
October 3rd, 2009 at 9:34 am
thansk admin.
October 5th, 2009 at 5:29 pm
Luv it! People like you move the Earth…
October 6th, 2009 at 9:32 am
Thanks mate but I dont think that you are totally true about some of the things. But nice information, too.
October 6th, 2009 at 10:41 am
Wow this is so cool!
October 9th, 2009 at 4:34 pm
Hi mom! I’m on TV!
lol
October 15th, 2009 at 7:37 am
Wow this is so cool!
October 15th, 2009 at 7:16 pm
Hi I am followed your website constantly. Very useful topics. Thanks
October 18th, 2009 at 3:10 pm
thanks of
October 19th, 2009 at 7:50 am
Thanks for this very good tutorial….
October 20th, 2009 at 2:21 pm
[...] 63. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]
October 20th, 2009 at 6:51 pm
[...] would be interested in reading the video transcripts so they are discreetly concealed using a javascript drop down mechanism. This way the page is still attractive and functional while being eminently [...]
October 22nd, 2009 at 9:22 pm
thnkaz
October 23rd, 2009 at 1:02 am
hi,
I thought I would share this with you….
I managed to work out how to open one div and close the previous one with javascript…. (like a toggle) in blogger(!) - . I am yet to find anyone else who managed it so I thought I had better share it with the world. In my fix the number of headings are set for the whole blog. It’s not tidy, but it works…..WELL
It also appears SEO friendly if you create separate pages with duplicate content for when Javascript is turned off (try it out - you can only access one of the pages unless you change your browser settings).
see my post about “WAR” as an example
disco.funk.contact@gmail.com
October 23rd, 2009 at 4:09 am
How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS
October 23rd, 2009 at 2:57 pm
thankss goodd
October 25th, 2009 at 4:30 am
Thanks for the informative article
October 25th, 2009 at 10:53 am
Thanks for!
October 25th, 2009 at 10:53 am
for the informative article
October 25th, 2009 at 10:54 am
Thanks for th
October 25th, 2009 at 10:54 am
informative article
October 25th, 2009 at 10:54 am
the informative article
October 25th, 2009 at 10:55 am
nformative article
October 25th, 2009 at 10:56 am
!ticle
October 25th, 2009 at 3:18 pm
Nerdly (or anyone else with the solution), could you please share with us how you accomplished this? This is exactly what I am looking to do with one of my current sites.
Thanks!
October 25th, 2009 at 3:18 pm
I love it thank you for the script.Question
is it possible to have a link saying “Open” once you click on it it slides the div down but changes the text from “Open” to “Close” ?
October 25th, 2009 at 3:19 pm
I have used Ajax on several website. Its especially usefull for better and fast display of sites and also the forms are attractive.
October 29th, 2009 at 6:28 am
Excellent guide to implement this. Most of the times Ajax is not an alternative for this.
October 30th, 2009 at 7:01 am
nformative article
October 30th, 2009 at 7:01 am
Hi mom! I’m on TV!
lol
October 30th, 2009 at 7:53 pm
great work thank you very much
November 7th, 2009 at 9:25 pm
nice info…. : )
November 13th, 2009 at 4:03 am
this is cool… but the script can handle image? or other div container?
November 13th, 2009 at 4:44 am
nice thnxxx
November 13th, 2009 at 5:55 pm
Hi and thanks for that nice sceensaver! Any plans to release that for the iphone or other cellphones… please!
November 14th, 2009 at 10:29 am
IMO best implementation would be to put it where the activities is.
November 17th, 2009 at 2:02 pm
nice articles. thanks master.
November 17th, 2009 at 10:10 pm
thanks. admin… nice..
November 19th, 2009 at 4:58 am
Hey. I have a question. Where would I change the javascript if i wanted the page to load with the DIV then have the option to hide it?
November 19th, 2009 at 9:26 pm
very nice great article thanks
November 20th, 2009 at 10:23 am
At first I thought you told Google to call the library, and it did, and that blew my mind.
Then I realized that you actually called the library, and my mind became unblown.
I’ll get back to work…
If you ask my opinion about this topic I really like. Thank you for sharing your friends. Hope to see you another day.
November 21st, 2009 at 7:08 pm
thank you for information
November 22nd, 2009 at 3:59 am
I bookmark this page. I am a newvie, This tutorial will help me a lot.
November 23rd, 2009 at 8:54 am
thanx a lot.. This helped me..
November 23rd, 2009 at 11:52 pm
This tutorial was very inspiring. I wrote an article in my blog showing an example of a sideways sliding DIV at http://kallol-brc.blogspot.com/2009/11/sideways-sliding-div-animated-sideways.html. Hope other might find it useful.
November 29th, 2009 at 8:25 pm
I’m really very useful to follow a long-time see this as a blog here Thank you for your valuable information.
December 15th, 2009 at 6:15 pm
I’m really very useful to follow a long-time see this as a blog here Thank you for your valuable information
December 16th, 2009 at 12:38 am
good！
December 21st, 2009 at 12:22 am
I used this tutorial to create a simple design on my site and it was easy to implement. Thanks a lot.
December 21st, 2009 at 12:38 am
Nice work.. Useful for me alot……….
December 21st, 2009 at 3:46 pm
thanks, nice work
December 21st, 2009 at 7:43 pm
We are looking forward to your next posting!
Thank you for the helpful tutorial
December 23rd, 2009 at 4:51 pm
At first I thought you told Google to call the library, and it did, and that blew my mind.
Then I realized that you actually called the library, and my mind became unblown.
I’ll get back to work bilumum oyun kaynağı…
If you ask my opinion about this topic I really like. Thank you for sharing your friends. Hope to see you another day.
December 23rd, 2009 at 4:56 pm
thank you for all oyun
December 26th, 2009 at 12:59 pm
xsad
December 26th, 2009 at 6:10 pm
Thak You For Sharing …
Web Tasarım Programlama ve Bilgisayar Dünyası
December 27th, 2009 at 4:34 pm
I’m really very useful to follow a long-time see this as a blog here.Thank you for your valuable information. oyun
January 1st, 2010 at 10:22 pm
Thank your for this tutorial.
January 3rd, 2010 at 7:57 pm
We are looking forward to your next posting!
Thank you for the helpful tutorial
January 4th, 2010 at 5:04 am
Thank your for this tutorial.
January 5th, 2010 at 2:27 am
very nice site pleace vizit
http://www.7emlak.com
http://www.alanyaseriilan.com
January 5th, 2010 at 9:20 am
Nice work.. Useful for me alot………
January 5th, 2010 at 5:28 pm
When I move the style for “mydiv” to an external style sheet, the slider stops working. Anybody know why?
January 6th, 2010 at 5:56 pm
very great works thanks you
January 7th, 2010 at 8:18 am
thanks, nice work
January 7th, 2010 at 2:32 pm
thank you nice posting..
January 7th, 2010 at 2:55 pm
Okay… I read the Blog Nice site I found and I bookmarked the site… Plan on coming back later to spend a little time there.
January 7th, 2010 at 11:15 pm
Okay… I read the Blog Nice site I found and I bookmarked the site… Plan on coming back later to spend a little time there.
January 8th, 2010 at 10:57 am
thank you nice posting..
January 8th, 2010 at 3:12 pm
thank you nice posting!!!
January 8th, 2010 at 7:47 pm
thanks, nice work
January 8th, 2010 at 11:25 pm
thanks very nice article
January 9th, 2010 at 7:25 am
thanks very nice article
January 10th, 2010 at 4:23 am
thanx is post admin
January 10th, 2010 at 10:31 am
thanx is post admin
January 10th, 2010 at 12:12 pm
nice blog. thnx admin
January 11th, 2010 at 12:40 pm
I’m so happy to have found this! I’m redoing my website right now, and i’ve been killing myself trying to find something like this.
thanks so much!
January 12th, 2010 at 9:36 am
nice blog. thnx admin
January 13th, 2010 at 12:18 pm
[...] open/close DHTML expand and collapse div menu for an animated effect look at something like Harry Maugans How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS __________________ Gamertag/PSN: Stormpool Playing Tekken [...]
January 13th, 2010 at 1:43 pm
I am curious to see what happens when I update the PC if it will end up messing something up in future updates
January 13th, 2010 at 7:29 pm
I am curious to see what happens when I update the PC if it will end up messing something up in future updates
January 19th, 2010 at 8:07 am
I’m so happy to have found this! I’m redoing my website right now, and i’ve been killing myself trying to find something like this.
thanks so much!
January 19th, 2010 at 7:37 pm
thank you for admin
January 21st, 2010 at 9:12 am
thank you for admin
January 26th, 2010 at 8:25 am
Okay… I read the Blog Nice site I found and I bookmarked the site… Plan on coming back later to spend a little time there.
January 28th, 2010 at 6:57 am
THANKS
January 28th, 2010 at 2:41 pm
q3f4ewRebr
eeee
January 28th, 2010 at 7:41 pm
great.. thank you
January 30th, 2010 at 7:19 pm
thnkas you
February 3rd, 2010 at 8:27 pm
I just wrote a code to do a variable width div without knowing the height of said div before you start the function, thus providing a way to have a dynamic amount of content in your divs. I know I looked for this for a LONG time, so I wanted to share it with you guys to avoid you having to stress.
All you need to do is replace the toggleSlide function with this one, and delete this line:
endHeight[objname] = parseInt(obj[objname].style.height);
from the startSlide function
Here’s the updated toggle function. If you want the two buttons in stead of the toggle, then just adapt it. This is a little bit of a cheat, but I haven’t had any “glitches” from testing yet. If somebody finds a better way PLEASE tell me (webmaster@netdocuments.com)
function toggleSlide(objname){
obj[objname] = document.getElementById(objname);
if(document.getElementById(objname).style.display == “none”){
obj[objname].style.display=”";
endHeight[objname] = obj[objname].offsetHeight;
obj[objname].style.display=”none”;
slidedown(objname);
}else{
endHeight[objname] = parseInt(obj[objname].style.height);
slideup(objname);
}
}
February 3rd, 2010 at 8:27 pm
oops, variable height* sorry about that!
February 6th, 2010 at 4:01 am
thanks you for
February 6th, 2010 at 8:33 am
bayrakçılar sitesi
February 6th, 2010 at 11:45 am
greeat work mans thanks
February 7th, 2010 at 12:42 am
Thank you for the perfect subject for an expression
February 8th, 2010 at 5:39 pm
this don’t work with monzila firefox….