• 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;
var slideAniLen = 500;
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.

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();
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.

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){
  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);
}
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.

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){
  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);
}
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.

Now, the function the above timer called was slidetick(), which is the next part of our motionpack.js file.
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;
}
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.

Now, the last function we’re needing in the motionpack.js file is the endSlide() function:
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]);
 
  return;
}
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.

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:

Slide Down   |   Slide Back Up

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 :)

» You can leave a comment, or trackback from your own site.

1513 Comments

  1. Kev Says:

    Thats some nice work.

  2. Dan Says:

    Cool work

  3. Scott Says:

    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..

  4. ilanko Says:

    Nice one, it will be nice to wipe “mydiv” horizontal too

  5. Harry Says:

    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

  6. Harry Maugans » How to Create a Collapsible DIV with Javascript and CSS Says:

    [...] Note, I’ve since made an updated post to this, with Digg comment style sliding animation included. Digg Article - Actual Link [...]

  7. Brétema : Blog Archive : Cómo crear un DIV expandible con CSS y Javascript Says:

    [...] 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 [...]

  8. chet Says:

    great job

  9. DQ Says:

    How does display:none effect search engine optimization? Do search engines ignore content that is within a display:none div?

  10. Steve Says:

    awesome

  11. Ian Says:

    Really cool.

  12. Charles Says:

    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.

  13. Dan Says:

    Thanks for sharing, I’ve been wanting to do something like this!

  14. Brombomb Says:

    Sweet. Thanks for the tip. I commented yesterday, but will definatly be adding this as well.

  15. Jim Says:

    Real nice that - well explained tutorial.

  16. State Of Brain Says:

    This is pretty neat. Thanks for taking the time to write it up!

  17. Juanjo Says:

    Nice work, thanks for the share

  18. tont Says:

    im not using firefox 1.5 and its not working. but, like the other guy, it works in IE.

  19. How to Create Digg Comment Style Sliding DIVs with Javascript and CSS « Tons of Fresh News Says:

    [...] 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. [...]

  20. John Says:

    Awesome!

  21. How to Create Digg Comment Style Sliding DIVs with Javascript and CSS Says:

    [...] read more [...]

  22. Drew Says:

    Have you done browser compatibility checks?

    Which browsers will this not work with, and does the information default to visible?

  23. JimmyLn Says:

    Wow this is so cool!

  24. Dan Esparza Says:

    Works fine for me in Firefox 2.0.0.2

  25. John Says:

    i am liking the comment system.

  26. Strzalek Says:

    It is cool

  27. animated sliding DIV with Ajax at trilodge computin blog Says:

    [...] 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 [...]

  28. links for 2007-03-07 | On Influence and Automation Says:

    [...] 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) [...]

  29. thankful reader Says:

    Awesome! First js script tutorial I could understand! Thanks again for sharing.

  30. Jen Says:

    Awesome!

  31. Johnpowell Says:

    Thanks.. That is very cool.

  32. Like Your Work » Blog Archive » links for 2007-03-08 Says:

    [...] Harry Maugans » How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS (tags: ajax) [...]

  33. Schneider Says:

    Cool.
    Is there any way to use a dynamic height?

  34. Anthony Ettinger Says:

    I like the animation pattern, simple and effective. Could use some cross-browser comliancy, but the just of it is conveyed nicely.

  35. Anthony Ettinger Says:

    I like the animation pattern, simple and effective. Could use some cross-browser compliancy, but the just of it is conveyed nicely.

  36. undefined Says:

    I am getting objname is undefined error in the error console. Anyone else running into a problem.

  37. undefined Says:

    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);”);

  38. Dean Ward Says:

    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);”

  39. Cohenville » Blog Archive » Create a sliding DIV on your web page Says:

    [...] such as script.aculo.us.  Firblitz posted a nice tutorial, which was initiated by an additional post from Harry [...]

  40. Devlounge | Friday Focus #21 Says:

    [...] - How to Create Sliding, Collapsible Div An article outlining the steps to create a sliding, collapsible div with javascript and css. [...]

  41. Matthew Alan Cline. K2 styles, css and web design babblings. Says:

    [...] read more | digg story [...]

  42. bahodir Says:

    Awesome, it works on firefox too….

  43. Fatih Hayrioğlu’nun not defteri » 10 Mart 2007 Web’den seçme haberler Says:

    [...] Javascript ve CSS ile hazırlanmış güzel bir geçiş efektli açılır menü örneği anlatımı ve kodu. Link [...]

  44. Jason Neuman Says:

    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

  45. Dieter Says:

    Nice tutorial, only problem is the static height. Pain in the ass if you have dynamic content!

  46. hmaugans Says:

    @ Dieter,

    Do you know a way around that?

  47. dafin Says:

    havnt you guys heard of AJAX?

  48. Ajith Says:

    it works well but only only by specifying height of the div…..advice me…

  49. Max Design - standards based web design, development and training » Some links for light reading (14/3/07) Says:

    [...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  50. Alexx Says:

    nice, it works here in any browser.

    thanx for sharing it,…

  51. Nate Klaiber Says:

    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.

  52. Dieter Says:

    @hmaugans: No i don’t but if i find some spare time i’ll take a look at it.

  53. John Faulds Says:

    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.

  54. Ocira Says:

    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

  55. haris Says:

    is there a way to slide horizontally ? left or right ?

  56. Bornie Says:

    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

  57. Chris Says:

    Why not just use jQuery?

    $(’#div’).fadeIn(speed).slideDown(speed);

    Easy!

  58. hmaugans Says:

    @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.

  59. How to Create Digg Comment Style Sliding DIVs with Javascript and CSS » Prateek Says:

    [...] read more | digg story [...]

  60. Webman Says:

    Great example, really slick!

    Just wondered about accessibility, does it work without a mouse?

  61. thinkabout Says:

    Nice tutorial!

  62. Regal Says:

    Very Nice, This might encourage me to learn more :)

  63. John Says:

    So how do you to the toggle slide then? maybe you should post a how to for that.

  64. Harry Maugans » Tutorial: AJAX Made Easy Says:

    [...] 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 [...]

  65. Bob Says:

    Coolio!

  66. tomtom Says:

    very cool

  67. chris Says:

    Good job

  68. Yansky Says:

    @ 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;
    });

  69. John Says:

    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.

  70. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS » Webdesign Archive Says:

    [...] 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] [...]

  71. Scott Says:

    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

  72. alternapop Says:

    @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.

  73. links for 2007-03-20 » Way Over Yonder in the Minor Key Says:

    [...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS (tags: css design programming tutorial) [...]

  74. John Says:

    @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.

  75. Harry Says:

    Congrats John, and thanks alternapop!

  76. Gordon Tatler Says:

    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

  77. Gordon Tatler Says:

    Sorry. Here is the page code.

    Show/hide some text

    This is the text to show/hide

  78. Gordon Tatler Says:

    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

  79. Tony Says:

    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”

  80. Stephen Clark Says:

    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..

  81. Adam Dempsey Says:

    Very useful, thanks :) Exactly what I’ve been looking for.

  82. Abaddon Says:

    Excelllent script man…
    Works both in IE and FF.
    thanx a lot… keep up the good work and write more scripts

  83. william Says:

    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.

  84. JoE Says:

    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.

  85. Harry Maugans » One Click Toggle for Sliding, Animated DIV Says:

    [...] 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 [...]

  86. Harry Says:

    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/

  87. Jeff Says:

    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…

  88. NIk Says:

    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?

  89. Lazy Hacker Babble » Blog Archive » Creating sliding DIVs Says:

    [...] a sliding divs like you see on Digg or many other sites. It was written in response to another tutorial on implementing a similar [...]

  90. Animated DIV’s Made Simple at Thoughts From the Train Station Says:

    [...] entry by Harry Maugans is far and away one of the best examples of animated DIV tags that I’ve come [...]

  91. Animated DIV’s Made Simple at Web ShopTALK Says:

    [...] entry by Harry Maugans is far and away one of the best examples of animated DIV tags that I’ve come [...]

  92. links for 2007-03-15 en newdisco Says:

    [...] Harry Maugans » How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS Solo eso. (tags: css javascript ajax) [...]

  93. boris Says:

    Harry,

    I can’t get the collapsible div to work on IE 6.0 — but it does work on Firefox?

    Any fix?

  94. Daniel Says:

    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

  95. zombie Says:

    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

  96. Wouter Says:

    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)

  97. Arron Says:

    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…

  98. boris Says:

    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.

  99. Jason Says:

    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?

  100. Leon Says:

    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]);
    }
    }

  101. Best of March 2007 | Smashing Magazine Says:

    [...] 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. [...]

  102. Kosta Krauth Says:

    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);
    }
    }

  103. Kosta Krauth Says:

    Sorry, the comment ate the div specifications, here it goes again…
    <div id="mydiv" style="display:block; overflow: hidden; height: 0px;">

  104. BillyG Says:

    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!

  105. links for 2007-04-13 « the adventures of a baby codemonkey Says:

    [...] 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) [...]

  106. All in a days work… Says:

    [...] 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) [...]

  107. Sean Says:

    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!

  108. Arvit Says:

    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

  109. me Says:

    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

  110. Digg-Style Animated Sliding Comment Box « Josh Davis Says:

    [...] 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 [...]

  111. Webdesign (css, grafica e altro) » Blog Archive » Best of March 2007 Says:

    [...] 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. [...]

  112. Jason Says:

    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?

  113. Nick Says:

    ITs cool script but how can i make it one button that can open and close. istead of seprate two links to do that?

  114.   The Best 12 CSS Resources (part 2) by 23Tutorials Says:

    [...] http://www.harrymaugans.com/2007/03/06/how-to-creat…; - Guide on How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  115. CodeBit.cn Says:

    不错的文章,非常感谢!

  116. People Meeting Says:

    This is pretty neat. Thanks for taking the time to write it up!!!

  117. Pinguin Says:

    Great script, but do you know why it flashes once just before it totally dissapears in IE? In FF it isn’t flashing btw.

  118. casey Says:

    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)

  119. Tom Says:

    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…

  120. kk Says:

    kk..tteessttiinngg

  121. Scylix™ Hoque Says:

    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
    }

    }

  122. Josh Davis » Blog Archive » Digg-Style Animated Sliding Comment Box Says:

    [...] 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 [...]

  123. Olivier Suritz Says:

    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);
    }

  124. Paul Says:

    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!! :-)

  125. Paul Says:

    Doh! Just solved it.

    I am using SWFObject to display my Flash.

    Updating to the new SWFObject V1.5 has fixed the clash!

  126. Redwall_hp » 29 CSS and AJAX Resources Says:

    [...] How to Create an Animated, Sliding, Collapsible DIV [...]

  127. greenman Says:

    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

  128. Bruce Says:

    Thanks very much. I found it very useful and well explained. Nice one.

  129. Bretema » Crear un div deslizante con CSS y Javascript Says:

    [...] 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 [...]

  130. nick Says:

    so - did anyone find a solution for a horizontally scrolling version?

    I hope so

  131. Marc Says:

    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.

  132. Chetan Kumar N Says:

    coool

  133. Andrew Says:

    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!

  134. dokice Says:

    Really helped me a lot.
    Thanks a lot.

    Bye.

  135. haxan Says:

    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

  136. haxan Says:

    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);
    }

  137. Your Website - WEEK 7 Says:

    [...] Animated sliding div [...]

  138. Jonathan Millar Says:

    Has anyone re-written this for cross browser compatability. I need it to funtion with IE6.

  139. Low Says:

    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!

  140. Andrew Says:

    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

  141. Cole Says:

    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

  142. Andrew Says:

    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?

  143. Andrew Says:

    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 :)

  144. Alexander Says:

    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

  145. 80+ AJAX-Solutions For Professional Coding | Smashing Magazine Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  146. the designer’s pages » Blog Archive » 85 AJAX-Solutions For Professional Coding Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  147. Arnab Says:

    Cool work..and it works fine in Firefox 2

  148. Cole Says:

    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 slideAniLen on 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 startslide function 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

  149. Cole Says:

    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 slideAniLen on 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 startslide function 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

  150. Cole Says:

    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 slideAniLen on 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 startslide function 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.

  151. » links for 2007-06-21 » MY Vast Right Wing Conspiracy Says:

    [...] 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) [...]

  152. JoeX Says:

    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

  153. Dooie Says:

    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

  154. 80+ AJAX-Solutions For Professional Coding | noisylime Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  155. Will G Says:

    This is great!

    One questiong though, has anyone found a way to expand the div from the “middle” out?

  156. Will G Says:

    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!

  157. Will G Says:

    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?

  158. 80+ AJAX-Solutions For Professional Coding | Webdesign (css, grafica e altro) Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  159. Bidding Web Directory Says:

    Woow! Excellent work! Love you! :)

  160. lost node » Blog Archive » 80+ AJAX-Solutions For Professional Coding Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  161. Animated, Sliding, Collapsible DIV - Ajax Compilation Says:

    [...] Website. [...]

  162. Florio Says:

    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.

  163. Bios Says:

    This is very good work, i’m already trying to implement this functionality on one of my websites. Thanks much for this.

  164. Zahir Says:

    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

  165. Hooke Says:

    I like it, but tell me, it works in all popular browsers?

  166. Open Source Web Design » 80+ AJAX-Solutions For Professional Coding Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  167. Gregor Says:

    Very good site. You are doing a great job. Please keep it up!

  168. Re: How to Create Digg Comment Style Sliding DIVs with Javascript and CSS « Private: .NET + OO concept Says:

    [...] a nice blog entry on how to make sliding DIVs using Javascript and CSS from scratch without having the overhead of [...]

  169. sastgroup.com » Blog Archive » 85 scripts ajax professionali Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  170. MEF Says:

    I have changed my sites since I found your blog. Keep up the good work.

  171. baby Says:

    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?

  172. Cole Says:

    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.

  173. Kevin Says:

    Cole, how you get it to work with dynamic height? Also it looks like you got it working with form elements…

  174. Kevin Says:

    Never mind I got it working with dynamic height.

  175. Kevin Says:

    Never mind, I got it to work dynamically. Thanks for the awesome script!

  176. Eliot Says:

    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

  177. Eliot Says:

    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.

  178. Andrew Says:

    Are we free to use this script whereever, or are there restrictions? Thanks!

  179. sssputnik Says:

    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?

  180. Youngy Says:

    Fantastic script m8, cheers for da tut.

  181. designedproton Says:

    I love it except if you select all and then copy it still copies the hidden text. Is there anyway to fix that?

  182. asdasd Says:

    asdasdsadsadasasd

  183. TEN Says:

    Thanks for the tutorial. CSS made my site better.

  184. tech dude Says:

    Thanks a tonne, this is exactly what I was looking for, made things a lot easier and saved me a tonne of time :)

  185. Sarah Says:

    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!

  186. oil painting portrait artists Says:

    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.

  187. tyler Says:

    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.

  188. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS - harrymaugans.com | Green Says:

    [...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  189. 80 AJAX Örneği (Profesyonel) Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  190. Pavan Says:

    Awesome work Olivier Suritz on the changes to the StartSlide() method for dynamic divs.

    Thanks

  191. Satilik daire Says:

    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

  192. Email Marketing | Email Marketing Pro Says:

    [...] 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/ [...]

  193. Joseph Slack Says:

    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.

  194. Joseph Slack Says:

    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;’

  195. Eurolingua Übersetzungen Says:

    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

  196. Div animato che si apre e chiude : sastgroup.com Says:

    [...] web: http://www.harrymaugans.com Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]

  197. NBA Says:

    Great tutorial. This is just what I was looking for.
    Thank you.

  198. Syxton Says:

    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);
    }
    }

  199. Kredi Says:

    Thanks for the tutorial.It helps me a lot…

  200. Dj Tiesto Says:

    i’m already trying to implement this functionality on one of my websites. Thanks much for this.

  201. Dave Says:

    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

  202. Ash Says:

    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?

  203. Adsense Says:

    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…

  204. mptre Says:

    I can’t get the ONE-BUTTON-SOLUTION to work, could someone post the motionpack.js code including the ONE-BUTTON-SOLUTION here please!

  205. Inko Says:

    thx for the great stuff, saved it ;P

  206. Hemish Says:

    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…

  207. Freelance Web Designer Says:

    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…

  208. Obez Blog » 80+ AJAX-Solutions For Professional Coding Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  209. How to Create Digg Comment Style Sliding DIVs with Javascript and CSS Says:

    [...] read more | digg story [...]

  210. Garth Says:

    Thanks, this helped a lot!

  211. kade Says:

    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

  212. sohbet Says:

    very good

  213. oyunlar Says:

    thanks

  214. How to Create Digg Comment Style Sliding DIVs with Javascript and CSS « Programming News Says:

    [...] read more | digg story [...]

  215. play online bingo Says:

    cool

  216. sohbet Says:

    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.

  217. sohbet Says:

    thank you good

  218. University Update - Yahoo - How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS Says:

    [...] 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, [...]

  219. sohbet Says:

    sohbet

  220. mynet sohbet Says:

    thankss

  221. sohbet Says:

    thanks :))

  222. mirc Says:

    thanks for artichlee

  223. sohbet Says:

    tahnksss

  224. Gayrimenkul degerleme Says:

    very Intresting article

  225. istanbul Says:

    thanx for article

  226. gumruk Says:

    great job

    thanx all

  227. oyunlar Says:

    thanks for artichlee

  228. mynet sohbet Says:

    thanksss

  229. chat Says:

    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…

  230. epilasyon Says:

    Thanks very much! Love your work!

  231. Chat sohbet Says:

    Thanks for the article verry informative and usefull to me

  232. mirc Says:

    thanks very good

  233. Tech Says:

    I followed it all the way through and the code didn’t work. Is there something I’m missing?

  234. Cups Says:

    Trying to do a multiple slide effect in a box … how can i manage to close an allready open slider if any ?

  235. Erhan Says:

    this is a great writeup, definitely a very, very good system.

  236. Sohbet Says:

    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!

  237. Roger Says:

    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!

  238. sohbet Says:

    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!

  239. oyunlar Says:

    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

  240. 85 AJAX scripts | AJAX | Web Design & Graphic Design Blog Says:

    [...] 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 [...]

  241. Meteko Says:

    I find this post very informative and interesting. I will try to use this on my site. Thanks for the great post.

  242. sohbet Says:

    thanks you comment

  243. Ersay Says:

    Thanks great job

  244. mirc Says:

    thanksss
    its nice
    best regards

  245. forum Says:

    thank you very much…

  246. Wild Says:

    Thanks for stuff.I was looking at the material over a large amount of time

  247. epilasyon Says:

    thank youu…..

  248. epilasyon Says:

    is a demo of a future new page on my website. it uses the dynamic height div function.

  249. lazer epilasyon Says:

    thanksss
    its nice
    best regards

  250. resim Says:

    thanks…

  251. chat Says:

    thanks

  252. DvdMovies Says:

    Movie World Video

  253. trdiscus Says:

    discus
    akvaryum

  254. komik videolar Says:

    thank you….

  255. Kurye Says:

    Thanks for this informations. yararli bilgiler icin cok tesekkurler. (escuse me my english is bad.)

  256. Web Tasarimi Says:

    Thanks for this information.

  257. Sasa Says:

    very nice :-) Thx :-))))))))

  258. photographer Says:

    thanx

  259. Edelsteine Says:

    Thank you for this fine article

  260. oyunlar Says:

    thanks…

  261. gumruk Says:

    thanx

  262. forum Says:

    Thanks, this helped a lot! see you

  263. International Song & Lyrics Archive Says:

    International Song & Lyrics Archive - International Song & Lyrics Archive

  264. türkiye sohbet Says:

    chat

  265. free online games Says:

    thans. very intresting article.

  266. free online games Says:

    thanks

  267. Polin Armsley Says:

    greet , awesome

  268. youtube Says:

    thnak.s

  269. emlak Says:

    thanks very good

  270. funny videos Says:

    with css 2.0 or other version ?

  271. video Says:

    thank you very much…

  272. bedava Says:

    with css 2.0 or other version ?

  273. Driver Says:

    thanks very good

  274. scott Says:

    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???

  275. online Says:

    very nice :-)

  276. online Says:

    Never mind I got it working with dynamic height.

  277. sohbet Says:

    thankss

  278. resim Says:

    thanks all

  279. Futile » Blog Archive » links for 2007-11-03 Says:

    [...] How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS (tags: css howto html javascript tutorial website) [...]

  280. carlos Says:

    “Never mind I got it working with dynamic height.” said online

    online why never ?

  281. Natalie Says:

    why not carlos

  282. chat Says:

    thanks..

  283. sohbet Says:

    I thought answers and google talk should get more traffic..

  284. msn ifadeleri Says:

    Do search engines ignore content that is within a display:none div?

  285. kral oyun Says:

    good article
    thanks

  286. Sohbet Says:

    Thanks for informations.

  287. ozay Says:

    thank

  288. İbrahim Says:

    Thank you..

  289. ozay Says:

    wowww thanks

  290. Daniel Says:

    Ty very much !

  291. komik vidiyolar Says:

    Thanks all informations.

  292. Evan Says:

    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! :D

  293. antalya Says:

    thanks

  294. Aşk Sözleri Says:

    thanks best site

  295. sohbet Says:

    thanks best site

  296. gala bingo Says:

    thanks this will come in really usefull

  297. youtube Says:

    thank youu

  298. chat Says:

    thank youudd

  299. sohbet Says:

    thank youudd

  300. sohbet Says:

    I read it and i think you right.

  301. oyunlar Says:

    hanks this will come in really

  302. Tapas Says:

    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.

  303. Kenn North Says:

    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.

  304. mirc Says:

    thanks for all apologies and articles. best regards

  305. sohbet Says:

    Real nice that - well explained tutorial.

  306. Komik Video Says:

    I read it and i think you right.

  307. Nihat hatipoğlu Says:

    thanks

  308. oyun siteleri Says:

    oh thank u very much for this article

  309. oyunlar Says:

    oh thanks a lot

  310. La Lista de códigos AJAX | WebLatam Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  311. kelebek Says:

    thanks

  312. islami sohbet Says:

    thanks you

  313. oyunambarı Says:

    Bedava Oyunlar

  314. Ray Says:

    Nice script.. thanks
    i looking for Sliding Collapsible like yahoo menu button, its so hard.

  315. yellowpages Says:

    thx for the great plugin! very useful … keep up your nice work

  316. yellowpages Says:

    thx for the great information very useful … keep up your nice work

  317. mirc Says:

    thanx for artichle

  318. barbie oyunları Says:

    Barbie oyunları

  319. Visvabalaji Says:

    Cool work…..I thought this work requires some advanced-scripting knowledge…!!!…helped me a lot understand it easily

  320. dellpass Says:

    This is just what I was searching for… thanks very much :)

  321. youtube Says:

    Thanks you

  322. hikaye Says:

    thanks

  323. sohbet Says:

    thansk you

  324. sohbet siteleri Says:

    thansk …

  325. chat Says:

    tahnsks

  326. facebook Says:

    tahnsk yo

  327. liquid06 Says:

    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

  328. video izle Says:

    Thanks…

  329. Richard’s Blog » Blog Archive » Animated Sliding DIV Effect Says:

    [...] 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. [...]

  330. kızlarla sohbet Says:

    thanks :D

  331. sohbet Says:

    thank you :)

  332. chat Says:

    thanks :D

  333. sesli chat Says:

    thanks :)

  334. islam sohbeti Says:

    Cole, how you get it to work with dynamic height? Also it looks like you got it working with form elements…

  335. bedava oyun Says:

    danke yavrum

  336. dirka Says:

    mylesef.com

  337. kız oyunları Says:

    thank u very much for this topic

  338. kız oyunları Says:

    thanksss a lot

  339. oyunlar Says:

    ohhhh thank u very muchh

  340. yellowpages Says:

    Very well explained tutorial, thanks for that.

  341. Sohbet Says:

    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.

  342. Chat Says:

    Thanks. denke shurn

  343. Tarih Says:

    mujux canlarim mujux

  344. chat Says:

    Thank you..

  345. sohbet Says:

    wery good.. sites

  346. kral oyun Says:

    good post

  347. aşk şiirleri Says:

    Thanks You..!

  348. bedava oyun Says:

    thanks

  349. sohbet Says:

    thank you

  350. komik video Says:

    Really cool.

  351. aşk şiirleri Says:

    Thanks…

  352. forum Says:

    thnk for all informatin

  353. sohbet Says:

    , 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.

  354. chat Says:

  355. sohbet Says:

    …..

  356. chat Says:

    thanks…

  357. tokat Says:

    ……………

  358. tokat Says:

    yesilyurt

  359. yesilyurt Says:

    ………….

  360. jatin Says:

    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…!

  361. sandalye Says:

    thank you

  362. oyunlar Says:

    Thats some nice work.

  363. Webtechnik Says:

    Hello! Thank you for the comprehensive explanation. Great work!!

    Best regards from http://www.webtechnik.net

  364. mermerit Says:

    mermerit lavabo,mutfak tezgahları,akrilikler,akril,akrıl,lavabo,lavabolar,mermer,mermerit

  365. chat Says:

    very nice works…
    thanks

  366. sohbet Says:

    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…!

  367. şiir Says:

    Thanks You..! Good post

  368. Übersetzungen dortmund Says:

    I read it and i think you right..

  369. David Says:

    Great Script and nice work

  370. 行搏客 » Smashing Magazine:80多个Ajax解决方案(2) Says:

    [...] 3、折叠的滑动div [...]

  371. sohbett Says:

    thankss

  372. sohbet Says:

    saolun

  373. Erdem Says:

    thank great job

  374. sdf test Says:

    sdf

  375. youtube Says:

    thanks great…

  376. pars narko terör Says:

    Thanks…

  377. msn nickleri Says:

    this is a great writeup, definitely a very, very good system.

  378. chat Says:

    thank you. great

  379. sex shop Says:

    tahnks very good

  380. Rupin Says:

    Hi,
    Does this work with a div whose position is absolute and display style is inline
    thanks
    Rupin

  381. islami sohbet Says:

    thanks ;)

  382. oyunlar Says:

    thank you

  383. Prashant Shetty Says:

    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 :-)

  384. aşk Says:

    thanks

  385. eğlence Says:

    ohh yes

  386. Laura Says:

    thanks! it really cool.

    But i have a problem with Firefox. :(

  387. tüp bebek Says:

    thanks man !

  388. online film izle Says:

    danke gud !

  389. dağlar delisi Says:

    thx very good

  390. dağlar delisi Says:

    thx very good ..

  391. vizyon film indir Says:

    thank you

  392. Laura Says:

    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

  393. how to : about all for FREE » Blog Archive » Gratuit free ajax scripts Says:

    [...] 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 [...]

  394. oyun Says:

    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.

  395. indir Says:

    thx very good ..

  396. ulas Says:

    Script mirc coder version webmastır domain alış satış unreal ptlink Cr bölümleri yanıtı burda.

  397. seo Says:

    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

  398. chat Says:

    thanks gözüm

  399. muhabbet Says:

    thanks very good

  400. ev Says:

    thanks very good ..

  401. oyunlar Says:

    thank you ..

  402. Mirko Says:

    We are looking forward to your next posting!
    Thank you for the helpful tutorial

  403. bob Says:

    How do i make it so it starts down

  404. oyun Says:

    hi your site wonderfull

  405. Make Up Says:

    Great and very useful informations, thanks.

  406. Ankara tüp bebek Says:

    danke so fiele.

  407. nakliyat Says:

    ty very usefull info.

  408. full oyun indir Says:

    danke so gud.

  409. gta hileleri Says:

    dzieki..

  410. tüp bebek merkezleri Says:

    thanks 4 this.

  411. yuotube Says:

    thank you very usefull informations..

  412. tüp bebek Says:

    thx very much.

  413. sohbet Says:

    thanks.

  414. chat Says:

    thanksss

  415. yeşilyurt Says:

    thank you…

  416. Danou Says:

    Great work, thanks….

  417. berkay Says:

    thanks. really good

  418. mirc Says:

    thanks for dude..

  419. gümrük Says:

    thank you

  420. telekinezi Says:

    thank you

  421. sohbet Says:

    thx very good ..

  422. aşk Says:

    sağolasınn yaw

  423. güzel sözler Says:

    sağollllllllllllll

  424. Terbitium Says:

    o0EalW Hello Perdun! Google.

  425. thedigitalnet Says:

    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?

  426. videolar Says:

    http://www.salgit.com
    http://www.iyivideo.com
    http://www.nekibu.com

  427. muhabbet Says:

    thank you

  428. radyo dinle Says:

    radio online players

  429. tv izle Says:

    dank u harry

  430. kız oyunları Says:

    teşekküürrrrrr

  431. sharp aquos Says:

    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

  432. programlar Says:

    thanks nice text

  433. programlar Says:

    thankss nice text…

  434. Yellow Says:

    Works great till I go to Style the div in an external css sheet , what do you think

  435. RayMay Says:

    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.

  436. çanakkale Says:

    thank you.

  437. bozcaada Says:

    Teşekkürler.

  438. oyunlar Says:

    thankss nice text

  439. bozcaada Says:

    thanks…

  440. ovvo news » Blog Archive » How to Create Digg Comment Style Sliding DIVs with Javascript and CSS Says:

    [...] 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 [...]

  441. gümrükleme Says:

    thank you very good article

  442. SomeName Says:

    I know this is Spam, but I just want to see the comment system in action.

  443. Mia Tyler Says:

    Mia Tyler

    Man i love reading your blog, interesting posts !

  444. çanakkale yurtları Says:

    thanks

  445. kadin rehberi Says:

    thanks

  446. tomcat Says:

    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

  447. ev Says:

    thanks.

  448. ev Says:

    thank you very good article

  449. youtube videos Says:

    Thanks…

  450. hasan Says:

    perde

  451. hasan Says:

    perdede olay

  452. hasan Says:

    model perderesmi

  453. perdeci Says:

    mrhba

  454. oyun Says:

    havnt you guys heard of AJAX?

  455. sohbet Says:

    susohbet

  456. chat Says:

    thanks sohbet

  457. tv izle Says:

    thanks

  458. gazeteler Says:

    dank u

  459. oyunlar Says:

    thanx

  460. prefabrik evler Says:

    Cole, how you get it to work with dynamic height? Also it looks like you got it working with form elements

  461. sex Says:

    thanks very good super

  462. porno Says:

    super blog tskler very good aq

  463. forum Says:

    forum thanks see you

  464. sohbet Says:

    thanks very good super

  465. stud med pharm » Blog Archive » How to Create Digg Comment Style Sliding DIVs with Javascript and CSS Says:

    [...] Digger’s requests in the comments, I spent all night typing up this tutorial. Hope it helps!read more | digg [...]

  466. justin Says:

    Awesome… thanks so much.

  467. porno Says:

    thanks regards..

  468. mirc Says:

    thank you all web

  469. mırc Says:

    hey doesnt matter

  470. hikaye Says:

    hikaye web page good

  471. oyun Says:

    thank you

  472. sohbet Says:

    thank youuu

  473. komik Says:

    komik web page good

  474. sex hikayeleri Says:

    thanks all hikaye

  475. film indir Says:

    thank you so much very usefull informations.

  476. Bedava Reklam Says:

    thank you so much very usefull informations.

  477. youtube Says:

    thanks

  478. best AJAX Solutions For Professional web design - The Arts Lab TurkeY Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  479. Web Site Çevirisi Says:

    Thank you

  480. Hitchhiker Nation Says:

    I Think, İt’s Very Nice…

  481. giysi oyunları Says:

    thanjsssss

  482. gfrtfrb Says:

    vdfvfdvdf

  483. Chat sohbet Says:

    Worked very well, thanks for that

  484. new pictures Says:

    thank you very good idea

  485. fel3232 Says:

    wow,l these people must be joking.

  486. mırc Says:

    thanks

  487. realdeal599 Says:

    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!

  488. Juval Says:

    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

  489. hikaye Says:

    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?

  490. seks hikayeleri Says:

    du you do know :) tyhanks all very good pages

  491. Michal Says:

    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.

  492. calla Says:

    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?????

  493. dkzs Says:

    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!

  494. estetik cerrahi Says:

    Very useful information

  495. sohbet Says:

    sohbet

    thanx for you

  496. clas Says:

    aşk şiirleri Thankss …!

  497. clas Says:

    aşk şiirleri Thankss …!

  498. film izle Says:

    ohhh yeahhh

  499. futbol Says:

    Thanks

  500. iddaa tahminleri Says:

    Nice site

  501. lexapro side effects weight gain Says:

    Big thanks! Very helpful article!

  502. lexapro side effects weight loss Says:

    Very usefull info! Thank guys for you work!
    Jimmy

  503. Hosdns Says:

    Thank you

  504. magazin Says:

    tnkhs

  505. oyun Says:

    thkns

  506. serega Says:

    amatuer nude wrestlers

  507. Oyun 1 Says:

    THANK YOU

  508. Oyun 1 Says:

    thank

  509. jeremy Says:

    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

  510. asi dizisi Says:

    thanks

  511. online dizi Says:

    thanks

  512. Muhabbet Says:

    Muhabbet, islami sohbet, dini sohbet

  513. trsexy Says:

    thanks

  514. oyunlar Says:

    oyunlar

  515. chat Says:

    thanks very good article.

  516. kız oyunları Says:

    thanks

  517. Sara Bareilles - Love Song Says:

    Sara Bareilles - Love Song

    Sara Bareilles - Love Song

  518. adnan Says:

    Free Nokia Themes

  519. adnan Says:

    Super Car Pro

  520. adnan Says:

    The Arcade Zone

  521. adnan Says:

    Scientists Blog

  522. adnan Says:

    Site Money

  523. adnan Says:

    Mobiles News

  524. adnan Says:

    Games News & Reviews

  525. asian girl on ladder Says:

    asian girl on ladder

    asian girl on ladder

  526. kistov Says:

    pre teen pageant gown

  527. çocuk oyunları Says:

    thanks

  528. Proxy Says:

    This is pretty neat. Thanks for taking the time to write it up!!!

  529. Anonymous proxy Says:

    thnx all

  530. youtube-izlesene.org , idealgenc.net youtube61.com youtube.oku.gen.tr videoizle.trsohbet.com youtube7.net youtube.com Says:

    alex

  531. Yutup yuotub yutub yuotup yuotube Yutupe yutube-izle-Yutup yuotub yutub yuotup yuotube Yutupe yutube-seyret-Yutup yuotub yutub yuotup yuotube Yutupe yutub Sexy Videosu yutub Erotik Videosu yutub Sıcak Videolar | yutub Ateşli Videoları - yutub Erotik iz Says:

    linda

  532. kamerali sohbet camli sohbet sohbet goruntulu sohbet yazili sohbet chat cet chet çet Says:

    ayhan

  533. Kolay chat Alem chat Gurbet Mirc Arkadaşlık Türk Chat Webcam chat Bol chat ideal chat Hoş chat Radyo chat mynet chat Yazılı chat siteleri bedava Kızlarla istanbul Kadinca Kadinca islami Ankara Muhabbet sevgi Aşk chat odaları chat odası chat Says:

    askinm

  534. Sohbet Chat Sohbet Odaları Chat Odaları Chat Sohbet Şiir Sohbet Chat EğLence E-Kart Chat Şarkı Sözleri GüzeL Sözler Sohbet Kızlarla Sohbet Almanya Sohbet Canlı Sohbet Arkadaş Bayan Arkadas Sohbet Chat Sevgi Sevgi Sözleri Aşk Sözleri Forum R Says:

    ece

  535. bedava sohbet kızlarla sohbet istanbul sohbet Kadınca sohbet islami sohbet ankara sohbet muhabbet sohbet sevgi sohbet Aşk sohbet sohbet odaları sohbet odası sohbet Hoş sohbet Radyolu sohbet Yazılı sohbet mynet sohbet sohbet siteleri ideal sohbet Says:

    retkit

  536. Bol sohbet webcam türkçe sohbet arkadaşlık sohbet mirc sohbet Gurbet alem Kolay Sohbet zurna Sohbet ZaLim sohbet dj-akman sohbet sevda Sohbet djakman Sohbet lida lida şarkı sözleri EKart Eglence yonja Ece Erken EceErken Hollanda sohbet Says:

    canim

  537. Hollanda almanya sohbet almanya amerika sohbet amerika Türklerle sohbet Türklerle chat Belçika sohbet Belçika ingiltere sohbet ingiltere Konya Konya Chat Hakkari sohbet Hakkari Seviyeli sohbet Seviyeli chat Sohpet çet espiriler güzeller Says:

    canyou

  538. mirckeyfi Says:

    sohbet mirc addon forum arkadaşlık

  539. sevda Says:

    sevgi ask şiir video forum güzelsözler sinama sarkı

  540. bedava oyunlar Says:

    Thanks this examples .! good Works !

  541. raffyman Says:

    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

  542. boznik Says:

    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?

  543. Aşk şiirleri Says:

    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!

  544. radyo dinle Says:

    Thanks

  545. aşk Says:

    Thank You for another very interesting article. So please try to keep up the great work all the time.

  546. msn nick Says:

    hi there, my trackbacks does not work. just would like to say thanks for this plugin, appears on my “must-have” list

  547. kral oyun Says:

    thanks you

  548. ankara evden eve nakliyat Says:

    danke so fiele

  549. ankara nakliyat Says:

    thank you men

  550. ankara nakliyat Says:

    ty excellent article

  551. film izle Says:

    ty useful informations

  552. youtube Says:

    thank you man.

  553. youtube Says:

    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

  554. dizi izle Says:

    thanks

  555. problem cocuk Says:

    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.

  556. johnrobin Says:

    This is a nice tutorial. something I search for a long time.

  557. resimler Says:

    thanksss

  558. sa Says:

    Thank you!

  559. mario oyunları Says:

    thank you

  560. linux Says:

    thankss

  561. Güzel Sözler Says:

    thank you wery mach

  562. Güzel Sözler Says:

    wery mach

  563. ForumVEFA Says:

    thanks dude.

  564. Forum Says:

    Thank you guy!
    it’s nice work..

  565. konya Says:

    Thanks

  566. Özge Özberk Says:

    Thank you great articles ;)

  567. Serkan Says:

    Thank you …

  568. DLL Says:

    Thanks

  569. Serial Says:

    thanksss

  570. Güvenlik Haber Says:

    Thank you!

  571. emir salih Says:

    Great jop man .

  572. well Says:

    nice essay

  573. film izle Says:

    Thank you for the helpful tutorial

  574. oyun indir Says:

    nice articles;)

  575. hiphoptube Says:

    I was looking for that…thanks :)

  576. ask Says:

    thanks nice

  577. Sensizlik Sokagi Says:

    Thanks :)

  578. hosting Says:

    good thanks

  579. Kötü İnsanları Tanıma Senesi Says:

    thank you very much.

  580. Ortam,Korku,Müzik,Film Says:

    Thank good document

    http://www.ortamdayiz.biz

  581. Sachet Dolum-Kolonyalı Mendil-Posetleme-TozDolum Says:

    Thanks.

    http://www.posetdolum.com

  582. Turkiyenin Süper Sitesi Says:

    Süper Site

    http://www.supertr.net

  583. Derya Baykal Says:

    Thanks a lot for this article

  584. Balık Avı Says:

    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

  585. sohbet Says:

    thanks very nice..

  586. cocuk Says:

    velet bu yahu

  587. gazeteler Says:

    I was looking for that…thanks

  588. Can Says:

    ohh yes good:D

    http://www.mp4divx.com

  589. film izle Says:

    thank you ver much

  590. oyun indir Says:

    thanks man :)

  591. Rock Says:

    thanks

  592. ersan Says:

    good site http://www.Sohbetmix.Net

  593. DIABLO Says:

    very good thanx http://www.sanaldata.net

  594. DIABLO Says:

    very good thanx

  595. webmaster hizmetleri Says:

    http://www.sanaldata.net

  596. sözlük Says:

    thanx

  597. teknoloji Says:

    thnax

  598. klingeltöne Says:

    thanx man great stuff, über 50.000 klingeltöne,handy spiele

  599. MUNZUR Says:

    thanx very good

  600. a Says:

    nokiaoyun.blogcu.com

  601. Ahmet aslan Says:

    thanxs man

  602. Elveda Rumeli Says:

    Thanks…

  603. PrgTrk Says:

    http://programturk.blogspot.com Programs - Games - Tools

  604. Güzel Sözler Says:

    thanks….

  605. java Says:

    thanx man !!

  606. n95,n series,mobile Says:

    thank you

  607. file extensions Says:

    I was looking for that…thanks

  608. barhal Says:

    Great work! Thanks

  609. sohbetiniz Says:

    thanks again i love this blog.

  610. sohbet Says:

    thanks

  611. Rüya Tabirleri Says:

    Thank you harry for this article.. i love it.. enjoy..

  612. indir Says:

    thank you harry maugans. this article is wonderfull

  613. yigit Says:

    thank you for at all..

  614. Tamders Says:

    thank you

  615. Tamders Says:

    thank you.

  616. dönem ödevi Says:

    thanks harry.article is nice

  617. En iyi Sanal Says:

    thanks..

  618. mustafa Says:

    thanks
    http://www.gencmavi.com
    http://www.mavindir.com
    http://www.komikgenc.blogspot.com

  619. BARISK Says:

    thanks very good
    http://www.fotoajans.bloggum.com
    http://www.sempanze.blogcu.com
    http://www.otomotor.blogcu.com

  620. yuotube Says:

    Thanks very very good infos. again thanks

  621. bedava oyunlar Says:

    Thanks very very good infos. again thanks

  622. müzik dinle Says:

    TThanks very very good infos. again thanks!

  623. sıcak pornolar Says:

    Thanks very very good infos. again thanks……

  624. Kampanyabul Says:

    Very thanks,

    http://kampanyabul.blogspot.com

    Güncel Kampanya Sitesi
    Turkish Blog Site

  625. http://www.exdizayn.com Says:

    Thanks

    http://www.exdizayn.com
    Web Services and Development

  626. moda Says:

    good tipp, it works ;)

  627. yunus Says:

    hey allahım ne günlere kaldık :)

    elin gavuruna el açtırma yarabbim =-)

  628. kurye Says:

    kurye moto kurye

  629. kurye Says:

    kurye moto kurye motorlu kurye avrupa yakası kurye

  630. youtube Says:

    thanks a lot good

  631. youtube Says:

    good share thanks a lot

  632. leo Says:

    Nice functions. I have tested the script and it works fine for me

  633. mIRC Says:

    mirc download

  634. Mynet Sohbet Says:

    Thank you very nice mynet sohbet

  635. Sohbet Says:

    Sohbet.tw Sohbet odalari

  636. Forum Says:

    Forum kahvesi bilgi paylasim forumu

  637. Domain Says:

    Alan adi tescil , Domain kayit

  638. Toplist Says:

    Toplist , Dizin , Siteni ekle

  639. Webmaster Says:

    Webmaster tools

  640. ForumUltra Says:

    Thanks….

    Sitemize Herkezi Bekleriz.
    http://www.forumultra.org

  641. Sohbet Says:

    thank you for at all.

  642. Chat Says:

    Thanx. good sites.

  643. Sohbet Chat Says:

    Thanks very very good infos. again thanks

  644. şair Says:

    thaanks

  645. sesli şiirler Says:

    çok güzel site inşallah faydası olur ;)

  646. pratik yemek tarifleri Says:

    güzel

  647. edebiyat sitesi Says:

    harika ty

  648. celebstar Says:

    thx

    http://www.celebstar.us

  649. Car Hire Autovermirtung Antalya Says:

    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.

  650. resimler Says:

    Wow this is so cool thanx so much !

  651. olcay Says:

    saol kardeş
    http://www.surucukursunuz.com

  652. abdullah Says:

    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

  653. Thuq_ Says:

    Emeğine SağLık Üsdad

    Http://forumplaza.org

  654. Forum Says:

    thanks a lot

  655. Tercüme bürosu Says:

    Thank you..

  656. sohbet Says:

    Thanks you..

  657. Chat Says:

    Thanks.
    http://www.turksevdasi.com
    http://www.sevdamol.net
    http://www.chatarkadas.net

  658. kpss100 Says:

    thanx,,

    http://www.dersimizkpss.com

  659. ahmet Says:

    male enhancement products, penis enlargement system,

  660. Ozeldepo Says:

    Thanx very good

    http://www.ozeldepo.com/

  661. Josh Says:

    cool stuff

  662. oyun indir Says:

    Thank you for your work.

  663. sağlık Says:

    Thanks.

  664. oyun siteleri Says:

    süperrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

  665. oyun siteleri Says:

    offfffffffffffffffff

  666. sohbet Says:

    thanks alot

  667. sohbet Says:

    thank you so much

  668. sohbet Says:

    thank you for this services

  669. mirc, mırc Says:

    danke manke falan

  670. radyo dinle Says:

    thank you so much

  671. Video sitesi Says:

    Hello, Nice article.
    Thank you very much
    video ekle izle video siteleri video indir google videoları

    video siteleri

  672. Firmalar Says:

    Thanks. Very useful article

  673. varto Says:

    thanks for all

  674. diet Says:

    thanks

  675. n34 Says:

    Thanks for this ;)

  676. jhon Says:

    I love Java :)

  677. zkud Says:

    thank you so much

  678. toplist Says:

    i cannot understand :(

  679. Gültekin DAL Says:

    Thank You.. Goooddd. very goood..

    http://www.batmanpostasigazetesi.com/

  680. sohbet odası Says:

    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.

  681. derya baykal Says:

    thank you for artichle

  682. deryalı günler Says:

    I fine thank you for

  683. chat Says:

    http://www.chatkalbi.com chat

  684. übersetzungen Says:

    There are many useful informations in this great article

  685. download firefox Says:

    Nice tutorial, but there is a problem with static height.

  686. english Says:

    fantastico..

  687. sözlük Says:

    thank you for the article..

  688. dictionary Says:

    very well done..

  689. dictionnaire Says:

    convenable..

  690. wörterbuch Says:

    herzensgut..

  691. Dj, Dj Programi, Dj Programlari Says:

    Nice tutorial, but there is a problem with static height

    dj deejays

    Thank you

  692. Dj, Dj Programi, Dj Programlari Says:

    Theree aree manyy usefull informatioons inn thiis greaat aarticle dj deejays

  693. dj, Dj Programlari, dj programı Says:

    thank you

  694. David Says:

    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

  695. Alexandr Says:

    Nice functions. I have tested the script and it works fine for me

  696. King Juego Says:

    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

  697. avukat Says:

    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.

  698. f1 photos Says:

    Great work! Thanks for this post

  699. Muhabbet Says:

    muhabbet, sohbet, sohbet odaları, muhabbet odaları, chat, çet

  700. Muhabbet odaları Says:

    ohhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhooooooooooooooooooooooooooooooho

  701. sohbet Says:

    sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

  702. msn nickleri Says:

    msn nickleri,aşk nickleri,şekilli nickler,damar nickler

  703. Vip Says:

    Very good tutorial.It was very helpful.Is there any way to collapse all ,expand all (like
    that in gmail)

  704. Kurtlar vadisi Pusu Says:

    Çok teşekkürler
    English: Thank you very much :) very useful

  705. mersin terapi Says:

    thankls

  706. Forum sohbet Says:

    Thanks

  707. toplist Says:

    thanks

    Web Tasarım
    Toplist
    Barkod Yazıcı Okuyucu
    Yönetilebilir Web Sayfası

  708. Terrific Commercial Property Sale Says:

    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…

  709. F1 Photos Says:

    thnax nice site

  710. korku Says:

    korku,korkunç,giyotin,korku sitesi

  711. korkunç Says:

    korku,korkunç,giyotin,korku sitesi

  712. giyotin Says:

    korku,korkunç,giyotin,korku sitesi

  713. korku sitesi Says:

    korku,korkunç,giyotin,korku sitesi

  714. Tupac Says:

    sohbet arkadaslik kamerali sohbet görüntülü chat odalari radyo dinle chat yap forum bilgi paylasimi forum oyunlari daha nicelri

  715. Tupac Says:

    http://www.sevdamisali.com http://www.sevdafm.biz

  716. Tupac Says:

    sohbet arkadaslik forum radyo dinle sohbet yap http://www.sevdamisali.com http://www.sevdafm.biz

  717. Tupac Says:

    http://www.sevdamisali.com

  718. sohbet chat Says:

    Online Chat edebileceğiniz bir sohbet sitesi. Anasayfasından hemen sohbete bşalayabileceğiniz sitede bundan başka , Sevgi ve Aşka dair

  719. Terrific Commercial Property Sale Says:

    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…

  720. pob Says:

    havnt you guys heard of AJAX?

  721. dorem Says:

    Very good tutorial.It was very helpful.Is there any way to collapse all ,expand all (like
    that in gmail)

  722. fdge Says:

    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

  723. astradza Says:

    I love it except if you select all and then copy it still copies the hidden text. Is there anyway to fix that?

  724. proxy Says:

    thnx all

  725. Turkchat Says:

    Very good tutorial.It was very helpful.Is there any way to collapse all ,expand all (like
    that in gmail)

  726. sevgi Says:

    Thanyou

  727. Chat Says:

    Thankyou

  728. joshua Says:

    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

  729. joshua Says:

    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.

  730. joshua Says:

    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.

  731. Josh Says:

    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.

  732. sohbet chat Says:

    http://www.yurtchat.net

  733. Jens Says:

    Thank you for the interesting article and for the code.
    He has help me. Regards

  734. oyunlar Says:

    Thanks for this best article

  735. Book Says:

    thank you

  736. perde Says:

    hello

  737. Şarkı Sözleri Says:

    thank you

  738. Kurtlar Vadisi Pusu Says:

    thanks

  739. Faceebok , arkadaş ara Says:

    arkadaş ara facebook | thanks for add

  740. chauffeur hire cehltenham Says:

    thants great

  741. iyinet webmaster forumu 2008 seo yarışması Says:

    Thank you very much!

  742. iyinet webmaster forumu 2008 seo yarışması Says:

    Thank you very much!

  743. bedava oyun oyna,barbie oyunları Says:

    i think it is very exciting.

  744. iyinet webmaster forumu 2008 seo yarışması Says:

    thanks for the this article.

  745. Mybb Temaları, Smf Temaları, Vbulletin Temaları Says:

    Thnx man…

  746. Blend Says:

    Thank you very much!

  747. Rüya Says:

    Thanks man…

  748. Ayrılık Mesajları Says:

    Thanks you very much [ Koyuyimde geri Kaç ]…

  749. » Animated DIV slide > FiddyP Says:

    [...] I learned it all at Harry Maugans blog, you can see the whole javascript here: Sliding/Collapsing Div [...]

  750. taylan Says:

    Thank you :)

  751. demet Says:

    güzel oldu güzel

  752. net gazetesi Says:

    süper bişi saol

  753. chat Says:

    Thank you

  754. girl pictures Says:

    Thanks.

  755. dj, Dj programları, dj programı Says:

    Thans nice :)

  756. mersin terapi Says:

    thanks

  757. arthur Says:

    I read it and i think you right

  758. Michael Says:

    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!).

  759. kameralı sohbet Says:

    thanks

  760. FIKRA Says:

    http://www.fikraturk.net

  761. ilahi Says:

    thanks so much

  762. mirçç Says:

    march1

  763. cinsel ürünler Says:

    all thanks brb .

  764. bodrum hotels Says:

    I read it and i think you right

  765. araba Says:

    do you have any idea about this comment field? :) i like it.

  766. betsson24 Says:

    thanks a lot ..

  767. dantel Says:

    Great article thanks

  768. sohbet Says:

    thankss too goodd

  769. benny Says:

    thanks man!

  770. güzel sözler Says:

    Thankss hurrymangas!

  771. aşk Says:

    Thankss the eNd.!

  772. Motorradbekleidung Says:

    top site go on :)

  773. Fitness Says:

    thanks

  774. free lyrics Says:

    Thanks Good Work

  775. virüs temizleme Says:

    Great post!

  776. mirc Says:

    thankss

  777. sohbet odası Says:

    sohbet

  778. alptekin Says:

    thnks

  779. POGRAN Says:

    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.

  780. e.g. Says:

    thanks, that’s a good work!

  781. resimler Says:

    Has anyone re-written this for cross browser compatability. I need it to funtion with IE6.

  782. canlı tv Says:

    Thank you.
    Great help stating.

  783. iddaa Says:

    Thank you for the helpful tutorial

  784. takı Says:

    First js script tutorial I could understand! Thanks again for sharing

  785. takı Says:

    it’s good thanks for sharing

  786. yüzük Says:

    very nice blog..

  787. mirc Says:

    very nice blog system

  788. Watch Video Says:

    Nice Blog… thanks.

  789. melek Says:

    Thank you. http://www.ekinoksforum.com da bu konu ile ilgili bilgiler mevcut.

  790. resim,video,youtube,program,sohbet Says:

    Nice Blog. Good like.

  791. güzel sözler Says:

    thankyouu bloggers

  792. aşk Says:

    goodd like

  793. güzel sözler Says:

    very nice blog system

  794. aşk Says:

    Has anyone re-written this for cross browser compatability. I need it to funtion with IE6.

  795. sohbet Says:

    very nice blog system ” Has anyone re-written this for cross browser compatability. I need it to funtion with IE6. “

  796. sohbet Says:

    thankss goodd syesteemm

  797. aşk Says:

    thanksss goood systemmm the end codee thankyouu :P

  798. Sagopa Says:

    thank you man

  799. Sagopa Kajmer Says:

    thank you man

  800. Kuyu Kebabı Says:

    yeah

  801. free beat Says:

    very good

  802. oyunlar Says:

    thanks for article good information

  803. MuratS Says:

    muhabbet

    muhabbet

  804. mirc Says:

    thanks a lot..

  805. kadın hastalıkları Says:

    Thanks for very interesting article.

  806. kız oyunları Says:

    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!

  807. glitter pictures Says:

    good news thank you

  808. girl games Says:

    Funny girl game

  809. minikperi Says:

    good sir. article

  810. film Says:

    Nice functions. I have tested the script and it works fine for me

  811. Cevapyaz Says:

    Thank you

  812. Sohbet Says:

    Thanks You.

  813. afyon sohbet afyon chat Says:

    thankyou
    http://www.sohbet03.net

  814. giysi giydirme oyunları Says:

    very nice blog system ” Has anyone re-written this for cross browser compatability. I need it to funtion with IE6. “

  815. oyun Says:

    Thanks very nice.
    http://www.moralhaber.net

  816. 深圳婚紗攝影 Says:

    thankyou

  817. search the world Says:

    thanks very good article

  818. oyun Says:

    mujux canlarim mujux

  819. kız oyunları Says:

    http://www.oyunuk.com thankyou

  820. haber aktüel Says:

    Thanks canım benim seviyorum seni

  821. +18 oyun Says:

    thanksssssssssssssssssssss

  822. bagkur Says:

    Thanks guys…

  823. Rize Says:

    Thank you…

  824. Rize Says:

    Thank you very much

  825. assos Says:

    Thank you

  826. gay seaford delaware Says:

    free gay man naked video

    gay man in black leather

  827. sohbet odaları Says:

    thanksstouu talk the endss

  828. güzel sözler Says:

    thanksssssssssssssssssss

  829. sohbet Says:

    thanKss goooddd

  830. aşk Says:

    thankss

  831. seks shop Says:

    dsasdasdasdasdasd

  832. sex shop Says:

    sex shop

  833. seks shop Says:

    sasadsadasdas

  834. erotik shop Says:

    eskkskss

  835. erotik ürünler Says:

    asasassaas

  836. erotik shop Says:

    aasassaas

  837. ŞİŞME MANKEN Says:

    SADASASDASDAS

  838. penis büyütücü Says:

    penisisiisis

  839. penis büyütücü hap Says:

    sadsadsadasd

  840. penis büyütücüler Says:

    sadasdasdasd

  841. penis büyütücü haplar Says:

    sadsadasdsadsa

  842. SEX SHOP Says:

    ASDASDASDASDA

  843. SEKS SHOP Says:

    SSAASDASDASD

  844. ANAL PENİSLER Says:

    SSADASDASD

  845. REALİSTİK PENİLER Says:

    SSDAASDASD

  846. geciktiriciler Says:

    sadadasdsad

  847. PENİS KALDIRICI Says:

    SADSADSADASD

  848. erotik magaza Says:

    sdsadasdsadasdsad

  849. cinsel ürünler Says:

    sadsadasdasdad

  850. cinsel shop Says:

    dssadsadsadsa

  851. cinsel magaza Says:

    sadsaasdsdasd

  852. gögüs büyütücüler Says:

    sdsadasdasd

  853. gögüs büyütücü hap Says:

    sadasdasdasdas

  854. bayan uyarıcı krem Says:

    sdasdasdasdasd

  855. bayan uyarıcılar Says:

    sadsaddsadsad

  856. bayan orgazım Says:

    asdsadsadsadasdsa

  857. bayan orgazım krem Says:

    sadasfdsfsdfsdfsdsdf

  858. sex shop Says:

    saasdasdsdafdds

  859. seks shop Says:

    sdsadasdsasdsad

  860. mirc Says:

    thansx you garry

  861. mirc Says:

    I thank for the knowledge

  862. ncahigherleanringcommission.org Says:

    I thank for the knowledge

  863. rgr4t Says:

    dorms

    classic scorched earth

  864. search the world Says:

    thank you very good article…

  865. MLM Is About YOU! Says:

    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.

  866. A-A-Reisen - Ferienwohnung in Ungarn Balaton und Tschechien Riesengebirge Says:

    Nice post. Well done. Thanks.

  867. CREATIONPOOL - Agentur für Internetseiten und Flash Programmierung in Berlin Says:

    Really impressive. Thanks.

  868. muhabbet Says:

    vxcvcxvcxvcxvcxv

  869. Oyun Says:

    very thanks guzel olmus

  870. redtube Says:

    very thanks guzel olmus

  871. redtube Says:

    Thanks for post, and nice all comments ! :)

  872. redtube Says:

    We are looking forward to your next posting!
    Thank you for the helpful tutorial

  873. making money Says:

    making money

    – …

  874. making money Says:

    making money

    “ …

  875. Cock Massive Cocks Cumshots Big Gay Cock Says:

    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

  876. minikperi Says:

    Good news

    Thank you

  877. facebook Says:

    I hope everybody read this article

  878. minikperi Says:

    good news

    thanks

  879. Istanbul Hotels Says:

    Hotels istanbul,Turkey.Book your hotel in Istanbul online.Good availability and great rates!

  880. business Says:

    Nobody can stop me by posting these comments.
    http://www.businesswebhostings.net

  881. emo resimleri Says:

    very nice share.

  882. rock resimleri Says:

    i love it.

  883. punk resimleri Says:

    great..

  884. Sushi bag Says:

    thanks a lot!

  885. hot air balloons uk Says:

    hot air balloons uk

    Excellent adventures

  886. Hot Air Ballooning | Grand Day Out Says:

    Hot Air Ballooning | Grand Day Out

    Hot Air Ballooning | Come Fly Today

  887. aşk şiirleri Says:

    THANKS ADMİN VERY GOOD

  888. Eric Says:

    Eric

  889. Insurance Small Business Health Insurance Nationwide Insurance Says:

    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

  890. rap dinle Says:

    Online Türkçe Rap Dinle

  891. türkçe rap Says:

    Online Türkçe Rap dinle

  892. James Says:

    Thx for this nice code, I love it really!

  893. credit repair card bank to serve bad Says:

    credit repair card bank to serve bad

    I want to learn more about this topic, thanks for posting it.

  894. Okey Says:

    very thanks you

  895. Buy A Car with Bad Credit Says:

    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…

  896. fffffff Says:

    ffffffffffffffff

  897. fffffff Says:

    bbbbbbb

  898. chase bank background checks Says:

    chase bank background checks

    I’m with the earlier poster, this seems like a good idea.

  899. msn ifadeleri Says:

    thanks

  900. rap, türkçe rap, rap müzik Says:

    rap, türkçe rap, rap müzik

  901. دردشة Says:

    very . . . nice
    thanks . . .

  902. Ödev Ders Öss SBS Says:

    Thanx your article

  903. radyo hosting Says:

    nice article thanks for sharing with us

  904. دردشة Says:

    very very very niceeeeeee
    thank u

  905. Free Home Insurance Quotes Http Www.insurance.com Home.aspx Says:

    Free Home Insurance Quotes Http http://Www.insurance.com Home.aspx

    Hi - just wanted to say good design and blog -

  906. bloger Says:

    thanx

  907. travesti Says:

    but you got good point of view

  908. kraloyun Says:

    good news

  909. kraloyun Says:

    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

  910. Jack Says:

    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

  911. Jack Says:

    Ahh,

    I see it removed my HTML I used for an example :(

  912. bayrakci Says:

    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.

  913. bayrak Says:

    thank you so much

  914. +18 oyun Says:

    thanksssssssssss

  915. +18 oyun Says:

    thanks adminn

  916. sohbet muhabbet Says:

    thanks sohbet

  917. erotik hikaye Says:

    thankss

  918. sohbet Says:

    hımm very good

  919. CcFreAk Says:

    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)

  920. aşk şiirleri Says:

    Tesekkurler Beyler..

  921. sohbet Says:

    çok güzel.. tşk

  922. burYq Says:

    thanks for it

  923. Web Design Magazine » AJAX-Solutions For Professional Coding Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  924. problemcocuk Says:

    so good..

  925. dizi izle Says:

    Thank you man good :)

  926. Kredi Says:

    Does it compatible with mootools?

  927. assos Says:

    Thanks good.

  928. chat Says:

    very good thnx

  929. aşk şiirleri Says:

    thanksss

  930. Plus Tc Says:

    Thank man..

  931. vagelis Says:

    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

  932. tamam Says:

    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!

  933. original oil paintings Says:

    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.

  934. terlik Says:

    thank you

  935. Netlog Says:

    Very useful tutorial thanx.

  936. Chat sohbet Says:

    Very good!

  937. aşk şiirleri Says:

    thank you

  938. aşk şiirleri Says:

    tenks elot ma nicht to them

  939. çet Says:

    nice, thanks alot

  940. sohbet Says:

    sohbet odaları

  941. Curt Says:

    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.

  942. Curt Says:

    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.

  943. sohbet Says:

    thanxxx

  944. sohbet Says:

    thank you freind……………………

  945. radyo Says:

    thanks you kardeş :DDDD

  946. Organizasyon Says:

    thank you !

  947. Kepce Says:

    thanks you kardeş :DDDD

  948. Organizasyon Says:

    thanks y

  949. "adtech ile reklam 2.0 dönemi başlıyor ve Trkycmhrytllbtpydrklcktr r10.net seo yarışması" Says:

    thanked post

  950. aytug akdogan ödüllü 1. seo yarışması ve yurtta barış dünyada barış Says:

    thanks you

  951. cet Says:

    allah razi olsun thanks

  952. sohbet kanallari Says:

    thanks you

  953. sohbet kanallari Says:

    thanks

  954. aids symptoms Says:

    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.

  955. aids symptoms Says:

    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.

  956. türkei urlaub Says:

    Useful tips. We have really benefited from it.

  957. "adtech ile reklam 2.0 dönemi başlıyor ve Trkycmhrytllbtpydrklcktr r10.net seo yarışması" Says:

    We will use this precious information

  958. türkei urlaub Says:

    good idea

  959. mammaplasty Says:

    php is king of all scripts

  960. mammaplasty Says:

    ververververy nice

  961. dekorasyon Says:

    cool thanks, is it working with all browsers?

  962. prefabrik Says:

    wow! its amazing.

  963. spandauer Says:

    http://www.forumbol.com

    http://WwW.FoRuMBoL.CoM | 2oo8 | Türkiye’nin En BoL Forumu!

  964. kabuska Says:

    sohbet eğlence aşk meşk warez program chat forum

  965. sex oyunları Says:

    no follow

  966. galatasaray resimleri Says:

    thanks so mucha

  967. forum sensizliksokagi.org Says:

    forum, sinema, müzik, edebiyat, kültur.

  968. knight online Says:

    online knight knight online forum

  969. Banka Şube Says:

    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/

  970. bedava video Says:

    thank you

  971. pcogretmeni Says:

    thank you

  972. volkan Says:

    Ekonomi Haber

  973. sohbet Says:

    thaks..

  974. şube Says:

    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.

  975. Camfrog Says:

    Thx !

    Camfrog Video Chat Forums http://www.undeadcf.info/

  976. Ash Says:

    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…

  977. Aşk şiirleri Says:

    2iz dingiller o dilinizi kopartırım sizin

  978. oyun Says:

    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.

  979. online shopping Says:

    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.

  980. oyun Says:

    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.

  981. minik peri Says:

    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

  982. link bidding directory Says:

    link bidding directory…

    The TrackBack specification was created by Six Apart, who first implemented it in their Movable Type blogging software in August…

  983. Steve Says:

    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?

  984. kelebek Says:

    nice script bravo harry. good luck

  985. forum Says:

    good luck very nice.

  986. kelebek chat Says:

    thanks

  987. youtube Says:

    thx for your plugin I am Blog

  988. çet Says:

    thanks.

  989. ueclwags qyxsa Says:

    qkocapbz rcwlfj wtokqjxeg sjenmt oqicgza slcihmvfn nkxv

  990. Arazi Araçları Says:

    THANKS

  991. travesti Says:

    THANKS

  992. çet Says:

    Thanks very good

  993. Estetik Says:

    thank you

  994. kabin Says:

    thanks your

  995. oyun oyna Says:

    thank you

  996. oyun oyna Says:

    thanks

  997. Lively Says:

    Great works.
    Thank you

  998. porno Says:

    thank you

  999. porno Says:

    thanks

  1000. sohbet Says:

    thanks a lot

  1001. HiCRaN.Net Says:

    Ask Siirleri

  1002. HiCRaN.Net Says:

    Ask Siirleri , MSN Nick

  1003. prefabrik Says:

    prefabrik konut ev ve villa konusunda cok iyidir.

  1004. dirka Says:

    eyw tenks emolar

  1005. erdem Says:

    saol eyw tenks

  1006. çet Says:

    cool work!

  1007. maynet Says:

    thansk sites

  1008. kpss Says:

    Thank you

    matematik
    matematik
    kpss

  1009. matematik Says:

    thank you

  1010. oyun Says:

    Great post, very detailed…

  1011. john Says:

    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!!!

  1012. blikibeRuill Says:

    I agreed with you

  1013. rixoyun Says:

    thank you very nice article

  1014. dikkat Says:

    thanks

  1015. hicran Says:

    MSN NICK

  1016. cam balkon Says:

    thanksss

  1017. youtube Says:

    thanks usefull

  1018. kpss cd Says:

    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?

  1019. kpss sonuçları Says:

    thanks usefull

  1020. javed Says:

    do anyone know how to slide left and right….if than help me.its urgent

  1021. saç ekimi Says:

    thank you

  1022. saç ekimi Says:

    thanks

  1023. saç ekimi Says:

    thank you veryMuch

  1024. Beth Says:

    Brilliant work! if only all ajax libraries were so small, effective and clearly explained!!

    – beth

  1025. ask siirleri Says:

    http://www.hicran.net/sohbet

  1026. atama Says:

    Nice script!! I’m loving it ;)

  1027. /home/hakan/ » Açılır Kapanır Div’ler(Katmanlar) Says:

    [...] bize nasıl yapıldığı aktarılan bu scripti buldum.Ancak biraz daha fonksiyonellik katılmış bu versiyonuda oldukça ilgimi [...]

  1028. Sohbet-turk.com Says:

    thanks

  1029. Çet Says:

    thanks a lot

  1030. ortam Says:

    thanx for nice share

  1031. Kelebek Says:

    kelebek

  1032. giysi giydirme oyunları Says:

    Great tutorial. i always wonder how to do sliders like this. Thanks for billion times

  1033. Lewis Says:

    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.

  1034. şiir Says:

    thank you

  1035. sbs Says:

    thanx for nice share

  1036. Sohbet Says:

    Thanks you

  1037. Chat Says:

    mucuks thanks

  1038. Sohbet Chat Says:

    by gonyalı cok ii buuuuuuuu

  1039. Konya Says:

    Konya portalı

  1040. Oyunlar 1 Says:

    nice article thanks…

  1041. Bruja Says:

    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.

  1042. Bruja Says:

    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?

  1043. kabin Says:

    its very good project.

  1044. Some Ajax Tutorial Links « The Brook Song - ঝর্ণার গান Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1045. Mike24 Says:

    Cool thx.
    I have seen some like this on tjis website
    http://www.redtube.to

  1046. oyun Says:

    Nice one, it will be nice to wipe “mydiv” horizontal too

  1047. şiir Says:

    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.

  1048. yeni mp3 Says:

    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

  1049. tavla indir Says:

    The web design is a sensitive area. The functionality defines limits but knowing these we have enough freedom to be creative.

  1050. okey indir Says:

    thank yu

  1051. triz Says:

    this is cool.. thanks for the script

  1052. cam balkon Says:

    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.

  1053. bro Says:

    Thanks

  1054. musty Says:

    hi all.

  1055. OD2 Says:

    Awesomeness dude.

  1056. Oyunlar Says:

    great code thansk….

  1057. avatar yapma Says:

    thangyou

  1058. oyular Says:

    thang you veri god.

  1059. çet Says:

    thanggg veri iyi

  1060. türkçe eğitim Says:

    Thanks

  1061. www.yenimp3ara.org Says:

    thank you

  1062. Spor Says:

    great code thank you

  1063. Oyun Says:

    thanks for code

  1064. ask siirleri Says:

    thanks you

  1065. sohbet Says:

    sohbet chat felan thanx

  1066. youtube Says:

    youtube very cool
    türkçe mirc

  1067. chat Says:

    chat

  1068. baris Says:

    sohbet, sohpet

  1069. hosting Says:

    thank you.

  1070. sohbet odalari Says:

    thank you.

  1071. sohbet Says:

    thanksss

  1072. muhabbet Says:

    thanksss You

  1073. Magazin Says:

    Celebrity Magazine

  1074. oyunlar Says:

    Thanks you

  1075. IRC Says:

    irc, ırc

  1076. 85 Kode AJAX Solusi Bagus untuk Design Web « OQ Blog | Share Our Knowledge Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1077. Netlog Says:

    thank you

  1078. flash oyunlar Says:

    good…

  1079. Hiper Blog Says:

    Thank You!
    sxe download

  1080. arkadaş Says:

    yes ay dou nat fuor

  1081. cizgi film izle Says:

    for güüt be saenmbsi

  1082. partner Says:

    thanks

  1083. mike Says:

    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);
    }

  1084. chat Says:

    thanks site admin.

  1085. olivier Says:

    Nice , works great

  1086. crAzy Says:

    Thank you.makale.

    Http://ismailyksohbet.bloggum.com

  1087. IG88 Says:

    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???

  1088. sendika,catia,aöf,657 Says:

    Thanks.
    This is my site http://www.657liyiz.biz
    sendika,catia,aöf,657

  1089. partner Says:

    thanks..

  1090. Trlively Says:

    Wonderful Stuff you post!! I LOVE it!

  1091. Howard Says:

    It dosn’t seem to work for me! Must be doing it wrong …


    http://www.nervouscop.com/

  1092. Dikkat Oyun Says:

    Wonderful Stuff you post!! I LOVE it!

  1093. Sohbet Says:

    Sohbet

    thanks you site owner

  1094. cam balkon Says:

    thanks you site owner

  1095. arkadaş Says:

    thanks youuuuuu

  1096. kelebek Says:

    thanks you site owner

  1097. oyun Says:

    thanks my friend

  1098. mirc Says:

    thanks

  1099. izlekop Says:

    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?

  1100. 80+ Ajax & Javascripts For Web Developers | Tech User, Blogger and Designers References Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1101. EnCilginForum - Msn, ifadeler, Avatar, gif, Ask Siirleri, Güncel haberler, izle, indir, Komik Resimler, Ilgınc Olaylar, Mp3, programlar, Resimleri,Vbulletin, Haberler,mp3 indir, film indir, Gothic resimler, metal ve türleri Says:

    Thanks…
    This is my web site
    http://www.encilginforum.com

  1102. Harry Houdini Says:

    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

  1103. kaman Says:

    ty.

  1104. 80+ AJAX-Solutions For Professional Coding | Evolution : weblog Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1105. dizi izle Says:

    thanks man good work

  1106. Çelik Konstrüksiyon Says:

    thans man

  1107. NeresiBurasi Says:

    whoa.. that is cool

  1108. Sercan Says:

    Thanks…
    This is my web site

  1109. Sercan Says:

    Thanks…
    This is my web site

    http://www.koparmaca.com

  1110. daniel Says:

    wanna learn java script now

  1111. Alex Says:

    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);
    }

  1112. ilan Says:

    Thanks.. good

  1113. heba ehab Says:

    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

  1114. sohbet Says:

    thanks, hero ;)

  1115. sohbet Says:

    Sohbet

  1116. sohbet Says:

    Thanks You Klas

  1117. mirc Says:

    Thanksyou

  1118. muhabbet Says:

    Thnaskyou

  1119. chat Says:

    yaoashasajaksajshabbs

  1120. mirc indir Says:

    Thanksyou Tree

  1121. sohbet sitesi Says:

    ThanksyouAre

  1122. mirc Says:

    ThanksYouTree

  1123. mircturk Says:

    Thanksyoueeaas

  1124. youtube Says:

    thanks for the information

  1125. Oyunlar Says:

    great code thanks

  1126. iddaa Says:

    thanks

  1127. oyunlar1 Says:

    thak you.

  1128. sohbet Says:

    wanna learn java script now

  1129. Johnny Says:

    thanx for great work

  1130. Chat Sohbet Says:

    Thanks for post

  1131. moda Says:

    thanx that example

  1132. Diyet Kalori Listesi ile Zayiflama,Diyet Kalori Listeleri Programi,Diyet Yemek Tarifleri,Lazer Epilasyon Says:

    Diyet Yemek Tarifleri Listeleri

    love harrymaugans

  1133. mistersquid Says:

    You, sir, are a gentleman and a coder.

    Thank you for this lucid and clear explanation of animating div disclosures with Javascript and CSS.

  1134. sikis Says:

    thanks for the information

  1135. sex shop Says:

    sex shop

  1136. ekin nakliyat Says:

    great entry

  1137. Hosting Says:

    Good Post. Thanks very much

  1138. Nuwan Says:

    Thanks for the post, its a nice piece of code

  1139. Marc Johnson Says:

    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!

  1140. eğlence Says:

    thanks

  1141. Lida Says:

    Thanks

  1142. Diyet Says:

    good blog thank you

  1143. Elektrik Malzemeleri Says:

    Thank You Very Much

  1144. Saç Bakımı Says:

    Good.

  1145. Sağlık Ürünleri Says:

    teşekkürler.

  1146. Matbaa Says:

    Çok Güzel olmuş…

  1147. asansorr Says:

    Thankkksss :D:D:D:D

  1148. Otomobil Says:

    Teşekkür…

  1149. Epilasyon Says:

    Perfect

  1150. Sağlık Says:

    Good ;)

  1151. İlaç Says:

    hmm ?_?_?_?

  1152. Teknoloji Says:

    çok güzel :)

  1153. Spor Says:

    baya güzel olmuş.kalemine destek

  1154. David Says:

    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.

  1155. çet Says:

    thanks youu

  1156. çet Says:

    expanded at any time

  1157. David Says:

    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.

  1158. metin Says:

    thank you

  1159. Todd Says:

    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!

  1160. jck Says:

    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,?

  1161. jck Says:

    how do i do this on blogger?

  1162. jck Says:

    ok i found the problem…
    when you preview it dosent inlude stuff from template so the motion pack.js wasnt included…

  1163. oyun indir Says:

    when you preview it dosent inlude stuff from template so the motion pack.js wasnt included…

  1164. seviyeli sohbet Says:

    thanks for the infoo

  1165. metin Says:

    thank you oyun oyunlar dinamikoyun oyunu

  1166. metin Says:

    thank you dinamikoyun oyunu oyun oyna

  1167. araba oyunları Says:

    thank you

  1168. futbol oyunları Says:

    thanks

  1169. yemek oyunları Says:

    best blog

  1170. motor oyunları Says:

    tahnk you turkey

  1171. savaş oyunları Says:

    hello

  1172. oyun gemisi Says:

    the best blog thanks

  1173. Video Says:

    very very thanx

  1174. Video Says:

    cool blog…

  1175. KdVideo Says:

    very very thanx…

  1176. ForumKD Says:

    god blog very thanx admin

  1177. Medyum Rabia Says:

    Havas - Vefk ilmi, Büyü, Dua, Muska, Cin ve daha fazlası ile dertlerinize derman olmaya geldik…

  1178. sex shop Says:

    xdgdf

  1179. seks shop Says:

    sss

  1180. 80+ Ajax Resources | SimcoMedia Design Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1181. travesti Says:

    thanx

  1182. منتديات Says:

    thanks , For You

  1183. Someone Says:

    Very nice script, tnx, but, is there a possibility for dynamical height?

  1184. Eleman Says:

    बहुत बहुत धन्यवाद

  1185. Hadise Düm Tek Tek indir Says:

    thanks ;)

  1186. mizahh Says:

    woow.. :) GREATT

  1187. mizah Says:

    thnks.

  1188. serqy Says:

    thanks a lot. it is very usefull

  1189. sohbet siteleri Says:

    nice site!!:)

  1190. netlog Says:

    thanks you

  1191. turk chat Says:

    thanks

  1192. oyun Says:

    thank very good site

  1193. halı yıkama makinası Says:

    This is pretty neat. Thanks for taking the time to write it up!

  1194. Alexandre Muniz Says:

    Ótimo trabalho, saudações e parabens do Brasil..

  1195. oyun oyna Says:

    Thanks very good site

  1196. sohbetsesi Says:

    thang you :)

  1197. Lukas Holota Says:

    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));

  1198. Bayan orgazm jel (alev-034) Says:

    Ü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.

  1199. EROPHARM CLITORIX ACTIVE 40ml (a-1511) Says:

    Bayan Uyarıcıve orgazım saglayıcı Krem

  1200. EROPHARM THE SPANISCH LOVE CREAM 40ml a-1510 Says:

    Bayanlarda orgazım saglayan krem

  1201. Orgazm geciktirici jel (alev-014) Says:

    alev-014 Not Yet Delay gel for men- doğal meyve kokulu Orgazm geciktirici jel

  1202. ALTIN KAPLAMALI VAJiNAL TOPLAR a-4109 Says:

    ALTIN KAPLAMALI VAJiNAL TOPLAR
    *4””lü Vajinal Zevk Topları…

  1203. ANAL ROD a-4140 Says:

    ANAL ROD

  1204. Anal Zevk Halkası /Jelly pleasure beads a-4111 Says:

    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.

  1205. BEAVER MASTURBATÖR UZAKTAN KUMANDALI TiT. a-4127 Says:

    Bayan Masturbatörü
    Uzaktan Kumandali Küçük Penisli Masturbatör İthal.

  1206. BUTTERFLY BAKiRE MASTURBATÖRÜ a-4123 Says:

    Butterfly
    * Klitoral Uyarıcı
    * Titreşimli

  1207. DRAGONZ TALE a-4134 Says:

    DRAGONZ TALE

  1208. SEX DOLL TiTREŞiMLi 2 iŞLEVLi Says:

    şişme bebek 2 işlevli 3 işlevli realistik şişme bebekler

  1209. DOMINATION DONNA MANNEQUIN a-5186 Says:

    DOMINATION DONNA MANNEQUIN

  1210. WILD CAT REAL DOLL POMPALI TiT. 3 iŞLEVLi a-5115 Says:

    * 3 İşlevli
    * Sarı Saçlı
    * Realistik Vajinalı
    * Şişirme Pompalı

  1211. realistik penisler Says:

    102 THE INVINCIBLE FLESH
    realistik penisler

  1212. ereksiyon ilaçlari Says:

    uzun geceleriniz için ereksiyon ilaçlari

  1213. protez penisler Says:

    içibos protez penisler

  1214. Magento Says:

    Great script, I’ve got it working on my site - very please with it, and thank you very much!

  1215. Magento Themes Says:

    Excellent tutorial :)

  1216. alışveriş Says:

    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.

  1217. adultlar Says:

    thanks bro.

  1218. adultlar Says:

    adult izle

    thanks

  1219. adult izle Says:

    thanks

    izle
    Adult izle

  1220. Javascript get height - DesignersTalk Says:

    [...] </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 [...]

  1221. denizliwebtasarım Says:

    profesyonel tasarım hizmetleri

  1222. seçim Says:

    thanks….

  1223. izmir ilaçlama Says:

    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 :)

  1224. alışveriş Says:

    thanks
    very good

  1225. Sohbet Says:

    thanx for nice artichle

  1226. chat Says:

    thanx for nice artichle for harry..

  1227. perde Says:

    thank you very much
    perde ve perde modelleri hakkında bilgiler

  1228. oyun Says:

    flash oyun
    flash oyunlar tüm oyunları

  1229. DianeV Says:

    Excellent work. Thanks for posting the code.

  1230. porno Says:

    thanks site

  1231. Music_Mp3_Efforgogy Says:

    Hello to all :) I can’t understand how to add your site in my rss reader. Help me, please

  1232. mirc Says:

    thanks for artichle

  1233. Kanishck Says:

    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.

  1234. Skelly Says:

    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

  1235. Nadine Says:

    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!

  1236. Devon Says:

    You could just do this with one line of jQuery code…

  1237. AJAX scripts and web developer resources you need for successful ajax applications | delimitdesign.com Says:

    [...] 63. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1238. 80+ AJAX-Solutions For Professional Coding « Rohit Dubal Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1239. 80 Ajax Goodies | BabyGore Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1240. perde Says:

    wonderful thank you

  1241. Ellis Benus Says:

    I starred this article in my Google Reader Oct 8, 2007.

    I just used it today.

    Fantastic article! Thank you very much.

  1242. giydirme oyunları Says:

    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?

  1243. komik oyunlar Says:

    I was just wondering that if you know how to create a fade effect along with the slide?

  1244. oyun indir Says:

    veryy beatiful web page thanks

  1245. full oyun Says:

    try thanks

  1246. mirc Says:

    great web, thanks

  1247. Anlaşmalı Matbaa - Fatura Basımı Says:

    Thanks for the tutorial.

  1248. sicak video Says:

    The display:none will ensure that the text is hidden on page load.

  1249. La Lista de códigos AJAX « recursoweb Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1250. Petr Svacina Says:

    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.

  1251. Kabooza Says:

    Great work, really appreciate it. THANKS!

  1252. Michael Says:

    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.

  1253. surabhi27 Says:

    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?//

  1254. Oyun Says:

    ty excellent article

  1255. sinema bursa Says:

    thnaks for you.. nice article.

  1256. Photos onto Canvas Says:

    This is great. I will use that on my site. Thanks

  1257. test Says:

    test

  1258. yarışma Says:

    test

  1259. oyun sitesi Says:

    nice site

  1260. porg Says:

    nice

  1261. Sohbet Says:

    Only after setting this my code started to work..
    yes

  1262. Ligtv izle Says:

    thank you very much..

  1263. 85 soluções AJAX para programação profesional. | Webmaster Tools Says:

    [...] 68. Cómo crear un DIV colapsable, animado y desplazable con Javascript y CSS [...]

  1264. bedava oyun oyna Says:

    Thank you very muchI like you website

  1265. oyun oyna Says:

    Teşekkürler işime yaradı bu makale

  1266. oyun Says:

    Tesekkurler severek girdigim bir site

  1267. oyun Says:

    her zaman takip ettigiim bir blog tesekkurler

  1268. play65 Says:

    play65 tavla oyunu oynayın paralı

  1269. MyRapNews.com Says:

    Thanks for sharing.

  1270. siirt Says:

    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.

  1271. mirc Says:

    This is great. I will use that on my site. Thanks

  1272. sohbet Says:

    her zaman takip ettigiim bir blog tesekkurler

  1273. web tasarımı Says:

    good

  1274. Recursos AJAX para desarrollo web profesional | Ayuda para tu Web y Blog Says:

    [...] Cómo crear un DIV colapsable, animado y desplazable con Javascript y CSS [...]

  1275. YouTube izLeSeNe Says:

    Thank you very much

  1276. mIRC Says:

    Thanks a lot.

  1277. mirc Says:

    Thanks for sharing.

  1278. Jim Says:

    Thanks.

  1279. seks Says:

    thank you very much
    http://www.seksene.net/index.php

  1280. blances Says:

    Thank you

  1281. marg*t Says:

    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

  1282. izle Says:

    Cómo crear un DIV colapsable, animado y desplazable con Javascript y CSS [...]

  1283. SeeBelieve Says:

    I like it, Thanks

  1284. rako Says:

    woww, I like it, thanks

  1285. Biyografisi, hayatı, eserleri, özgeçmişi|Kim Kimdir Says:

    nice

  1286. Sohbet Says:

    very good thanks.

  1287. Sohbet Says:

    thanks for this article.. Sometimes many pictures may draw off the attention.

  1288. Lightweight Javascript Animated Content Slider (Expandable DIV) | Flash Chilli Says:

    [...] 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 [...]

  1289. sikiş Says:

    thank you

  1290. michael sommer Says:

    great article, thanks

  1291. izmir temizlik firmaları Says:

    Thanks a lot for writing it.

  1292. Daily Bookmarks 05/13/2009 « Experiencing E-Learning Says:

    [...] Harry Maugans » How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1293. Abdel Says:

    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.

  1294. proje Says:

    thanks (:

  1295. şarkı sözleri Says:

    nice ;)

  1296. ünlü resimleri Says:

    super

  1297. manken resimleri Says:

    thanks (:

  1298. oyu oyna Says:

    havnt you guys heard of AJAX?

  1299. sex hikayeleri Says:

    supperrr

  1300. sexi fotolar Says:

    great article, thanks

  1301. sanat Says:

    thanaaaksssss

  1302. ressamlar Says:

    supperrr

  1303. diyet Says:

    thanks (:thanks (:thanks (:

  1304. Penis Eater Says:

    Eat my penis.

  1305. chat yap Says:

    chat yap Chat Yap

  1306. kiralık bobcat Says:

    kiralik bobcat kiralık bobcat
    tşk

  1307. ekol hoca Says:

    very thankssa

  1308. 85 soluciones AJAX para desarrollo profesional. | Webizzima Says:

    [...] 68. Cómo crear un DIV colapsable, animado y desplazable con Javascript y CSS [...]

  1309. tatil Says:

    thank you good your site

  1310. Condo in Calgary Says:

    Niiice, so glad the market is better now - wicked price.

  1311. Condo in Calgary Says:

    Real estate in Calgary seems to be bucking the trends globally…

  1312. 2 br condo Says:

    This seems like a good investment, thanks.

  1313. Calgary real estate guru Says:

    Real estate in Calgary seems to be bucking the trends globally…

  1314. emo Says:

    This seems like a good investment, thanks.

  1315. penis buyutucu Says:

    thanks. goody.

  1316. Sohbet Sayfalari Says:

    thanks you

  1317. chat Says:

    thanks you for article

  1318. 27+ Handy Javascript Techniques for Web Designer - Billyblue Entertainment Says:

    [...] 26 . Collapsible DIV with Javascript and CSS [...]

  1319. Dizi izle Says:

    thanks you for article

  1320. basketbolhaber Says:

    Cool work ;) Thanks

  1321. nbaplayer Says:

    OOO thanks man..good work ; )

  1322. NBA ve BAsketbol Says:

    Thanks For Article..Very Nice Work :)

  1323. inegöl Says:

    thanks it is good and for post

  1324. inegöl Says:

    thanks you for article .)

  1325. inegöl haber Says:

    OOO thanks man..good work :)

  1326. inegöl mobilya Says:

    Cool work Thanks ;)

  1327. inegöl köfte Says:

    Cool work Thanks :P

  1328. sohbet Says:

    Very interesting and informative piece!

  1329. Insinehonee Says:

    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

  1330. sohbet Says:

    Thanks for the theme. I will just still have to get a different header image.

  1331. Triplo X Says:

    Very good man!
    perfect.

    []s

  1332. tommy vercetti Says:

    porn sites with adult content
    http://www.pornoizlesenee.net
    http://www.pornosikisadult.net
    http://www.pornosikisporn.net

  1333. mirc Says:

    verry goog..

  1334. programy Says:

    very good

  1335. videolar Says:

    gooooodd things..

  1336. Okey Says:

    thanks a lot..

  1337. sağlık Says:

    thank you. good your site.

  1338. komik oyunlar Says:

    God knows how long I been looking for a tutorial like this. It really made my life easier with my late project.

  1339. vestel beko siemens arçelik bosch servisi ebys Says:

    thanks for this article

  1340. markmurphy Says:

    Great Script Harry!!
    Thanks also to Olivier Suritz and Mike for correcting dynamic fix :)

  1341. Oyun Says:

    Really! Wanderful

  1342. Oyunlar Says:

    everbady thanks..hey!

  1343. indir Says:

    think we should DEFINETLY have a 10th planet!

  1344. Ulysses Says:

    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?

  1345. sohbet Says:

    It really made my life easier with my late project. Thank you very much and keep up the good work

  1346. sohbet Says:

    Thanks lol : )

  1347. sohbet Says:

    Omg

  1348. Turkey Says:

    Error codes are

  1349. Deamedewbriem Says:

    All I can say is WOW

    http://www.esnips.com/doc/79c22395-7bd6-4299-92db-cf392e381698/kutiman—this-is-what-it-became

    L8R

  1350. bursa emlak Says:

    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.

  1351. yarışma Says:

    are you allowed to redistribute? i’d hate to see adobe shut this down.

  1352. laptop Says:

    hmmm:…

  1353. sohbet Says:

    Thank you for this useful information about the divs I

  1354. BrooponeAnync Says:

    вали мои товарищи. Я даже знал имя одной такой ко-
    – Вы очень сексуальный мужчина, не так ли? – промурлыкала Клер, в глазах которой все плыло, хотя она и стояла на полу обеими ногами.
    На столе было немало изысканных блюд. Однако на них практически не обращали внимания. Жаркая дискуссия, начавшаяся в офисе, продолжалась и отбила у всех аппетит.
    http://envnidkdlk.t35.com/

  1355. rinomodelacion Says:

    Thanks for this very good tutorial.

  1356. sikiş izle Says:

    thanks for your article sir. nice job

  1357. Sciemijiket Says:

    солдата, ни слова не отвечая на них. Неожиданный переход от обыкновенного нажил старик. Можете себе представить, сколько на основании этих слухов Отметить какоелибо событие на работе означало отдать себя в руки первого же Король был молод и, как свойственно молодым, легко поддавался свежим скрывающиеся от закона. И всех их надо было гдето разместить, чемто пускают. Ни одну, ни другого. И вот молодая женщинаневеста стоит на коленях какнибудь уцелею, думаю я про себя, и решаюсь отпустить старика. Поймите: я

  1358. Sciemijiket Says:

    уж этот Сева!) с места в карьер попросил её рассказать, как устроена Действительно, согласился Олег. Убей не пойму, каким образом марка, украденная у Джерамини, снова очутилась у него? И зачем он ее собирался отправить какомуто Кактусу? приходит (а в Москву Федора Васильева, как он был очень боек, мастерству Совершенно верно, подтвердил Нулик, пробегая письмо Магистра, тут так и сказано. веселью, и тоску твою, всегдашнюю почти, редко нам приходится до конца дядя Петр. Што ты теперь будешь делать? отношения, так еще и во всех устремленных на него глазах читался

  1359. medyum Says:

    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?

  1360. sedat Says:

    Thanks for this very good tutorial.

  1361. azureus download Says:

    what’s that?

  1362. programy Says:

    it’s realy incredible, great post, thank you very much.

  1363. Justin tv izle Says:

    whoa.. that is cool

  1364. NesMedya Haber Video Oyun Seo Yarışması Says:

    it’s realy incredible, great post, thank you very much.

  1365. Zamshed Farhan Says:

    Very nice tutorial…………

    http://www.zamshed.info/tech/

  1366. George Bo Says:

    Great Example, thanks!!!

  1367. sohbet Says:

    good lifing sohbet room

  1368. sevilla Says:

    Very good example. Thank you.

  1369. Turkey For Holiday Says:

    good example free tech

  1370. demetsener Says:

    detot@hotmail.com

  1371. Müzik dinle Says:

    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

  1372. DANTEL Says:

    Very good example. Thank you.

  1373. yeni albümler Says:

    it’s realy incredible, great post, thank you very much.

  1374. elbecerilerii Says:

    thankss goodd syesteemm

  1375. Albüm dinle Says:

    It really made my life easier with my late project. Thank you very much and keep up the good work

  1376. anlatımlı örgüler Says:

    Thanks for this very good tutorial.

  1377. erakNisee Says:

    [color=green][size=24][/size][/color]

  1378. jagra Says:

    bro thanks

  1379. Lida Says:

    Good on your

  1380. 80+ AJAX-Solutions For Professional Coding « Offshore Outsourcing Development Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1381. paslak Says:

    Nice script, i was wondering…

  1382. online oyun Says:

    Thanks for posting about this, I would like to read more about this topic.

  1383. edcasasola Says:

    hello

  1384. öss yerleştirme sonuçları Says:

    Nice script, i was wondering

  1385. dansk Says:

    This looks great. Works perfect on normal html but doesn’t seem to work on my wordpress page. …?

  1386. s Says:

    Resimler

  1387. Lazer epilasyon Says:

    thanks, nice script

  1388. tugla Says:

    Thanks a great site

  1389. alcak Says:

    thanks yours.. bveryf

  1390. medyum Says:

    Wow this is so cool!

  1391. precoz Says:

    Excellent script. Thanks.

  1392. şarkı sözleri Says:

    thanks for your article sir. nice job

  1393. chat Says:

    Thanks a lot, its all about the Fonts in my opinion. Ill come by to read some more of you

  1394. iddaa Says:

    iddaa, iddia, maç sonuçları, canlı sonuçlar

  1395. mike Says:

    Is there away to set a cookie, so if some one leaves the page, the cookie will remember which div boxes were opened?

  1396. bildirir Says:

    thanks for your article sir. nice job…

  1397. erotik film izle Says:

    thanks mate

  1398. can sıkıntısı Says:

    Thanks, to my job :P

  1399. Tamer Says:

    thanks for your article sir. nice job…

  1400. telefon dinleme Says:

    Beautiful article! It’s just what i needed to understand. Happy Day’s

  1401. dinleme cihazı Says:

    Beautiful article! It’s just what i needed to understand. Happy Day’s thanks

  1402. youtube gir Says:

    Hi man ! yeah your articles very good and usefull. Thanks for this posting..

  1403. Çizgi Film Says:

    thanks admin

  1404. Rap Paylasim Alanı Says:

    Thanks Admin ;)

  1405. Maç golleri Says:

    tşk.

  1406. tibytza Says:

    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!

  1407. hiphop Says:

    falanda filan da fistik mistik cacik macik

  1408. kodes Says:

    cacik macik bu isler cok karisik falan filan

  1409. Mask Says:

    ani mani hani thank you very good

  1410. MonsterMicha Says:

    Genius script!
    Thanx for sharing.

  1411. Netereyon Says:

    güzel paylaşım - netereyon alışveriş sitesi cep telefon satış sanal mağaza

  1412. JohnKG Says:

    Компании Нижнего Новгорода набирают специалистов из разных городов России, выскоко

    ценяться такие специальности как: it-специалисты, технологи, администраторы и т.п.

    Всю подробную информацию можно изучить на сайте

    [url=http://companynn.ru]companynn.ru[/url].

  1413. janjan Says:

    muka kaung vigina o puke

  1414. radyo Says:

    radyo, radyolar, radyo dinle

  1415. porno film izle Says:

    thanks mate !

  1416. 78 efectos y scripts ajax « Jarivia 3D, blog de investigacion 3d interactiva para web Says:

    [...] 63. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1417. 80+ AJAX-Solutions For Professional Coding | THUYTINH.INFO Says:

    [...] 68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1418. Anup Kuma Das Says:

    Very useful. Thanks for sharing.

  1419. çet Says:

    thansk admin.

  1420. Bongski Says:

    Luv it! People like you move the Earth…

  1421. SEO Says:

    Thanks mate but I dont think that you are totally true about some of the things. But nice information, too.

  1422. oyunlar Says:

    Wow this is so cool!

  1423. TyiweonRaq Says:

    Hi mom! I’m on TV!
    lol

  1424. Büyü Says:

    Wow this is so cool!

  1425. avşa Says:

    Hi I am followed your website constantly. Very useful topics. Thanks

  1426. konya chat Says:

    thanks of

  1427. Sofia Says:

    Thanks for this very good tutorial….

  1428. kameralı sohbet Says:

    [...] 63. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS [...]

  1429. YoTricks.com | Freshly Brewed Web Design Says:

    [...] 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 [...]

  1430. lez sohbet Says:

    thnkaz

  1431. disco Says:

    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

  1432. oyunlar Says:

    How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS

  1433. Sohbet, Chat, Says:

    thankss goodd

  1434. Jesse Says:

    Thanks for the informative article

  1435. wallpaper Says:

    Thanks for!

  1436. wloger Says:

    for the informative article

  1437. onlinegames Says:

    Thanks for th

  1438. Kiralıktekneler Says:

    informative article

  1439. pandik Says:

    the informative article

  1440. cambalkon Says:

    nformative article

  1441. dizi izle Says:

    !ticle

  1442. Kodes Says:

    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!

  1443. Kodes Says:

    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” ?

  1444. Kodes Says:

    I have used Ajax on several website. Its especially usefull for better and fast display of sites and also the forms are attractive.

  1445. rentenversicherung Says:

    Excellent guide to implement this. Most of the times Ajax is not an alternative for this.

  1446. Online Dizi izle Says:

    nformative article

  1447. Tripcolik Says:

    Hi mom! I’m on TV!
    lol

  1448. oyun Says:

    great work thank you very much

  1449. ciko_waswa Says:

    nice info…. : )

  1450. Irvin Says:

    this is cool… but the script can handle image? or other div container?

  1451. sohbet Says:

    nice thnxxx

  1452. cinsel sohbet Says:

    Hi and thanks for that nice sceensaver! Any plans to release that for the iphone or other cellphones… please!

  1453. cinsel sohbet Says:

    IMO best implementation would be to put it where the activities is.

  1454. mirc Says:

    nice articles. thanks master.

  1455. Oyunlar Says:

    thanks. admin… nice..

  1456. Marco Says:

    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?

  1457. moto kurye Says:

    very nice great article thanks

  1458. direk izle Says:

    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.

  1459. motorlu kuryeler Says:

    thank you for information

  1460. Lawyers Bowraville Says:

    I bookmark this page. I am a newvie, This tutorial will help me a lot.

  1461. Danesh Uthuranga Says:

    thanx a lot.. This helped me..

  1462. Kallol Says:

    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.

  1463. peynir Says:

    I’m really very useful to follow a long-time see this as a blog here Thank you for your valuable information.

  1464. parite Says:

    I’m really very useful to follow a long-time see this as a blog here Thank you for your valuable information

  1465. Abercrombie Fitch Shorts Says:

    good!

  1466. Nicole Says:

    I used this tutorial to create a simple design on my site and it was easy to implement. Thanks a lot.

  1467. Venki from India Says:

    Nice work.. Useful for me alot……….

  1468. Sigorta Says:

    thanks, nice work

  1469. YouTube Says:

    We are looking forward to your next posting!
    Thank you for the helpful tutorial

  1470. oyun Says:

    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.

  1471. oyun Says:

    thank you for all oyun

  1472. nakliyat Says:

    xsad

  1473. Aytac Says:

    Thak You For Sharing …

    Web Tasarım Programlama ve Bilgisayar Dünyası

  1474. oyun Says:

    I’m really very useful to follow a long-time see this as a blog here.Thank you for your valuable information. oyun

  1475. sohbet Says:

    Thank your for this tutorial.

  1476. Güncel Blog Says:

    We are looking forward to your next posting!
    Thank you for the helpful tutorial

  1477. Almanya Sohbet Says:

    Thank your for this tutorial.

  1478. volkan Says:

    very nice site pleace vizit

    http://www.7emlak.com

    http://www.alanyaseriilan.com

  1479. Almanya Sohbet Says:

    Nice work.. Useful for me alot………

  1480. Erik Says:

    When I move the style for “mydiv” to an external style sheet, the slider stops working. Anybody know why?

  1481. sikiş Says:

    very great works thanks you

  1482. Almanya Sohbet Says:

    thanks, nice work

  1483. sohbet Says:

    thank you nice posting..

  1484. cinsel sohbet Says:

    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.

  1485. yeni oyunlar Says:

    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.

  1486. Almanya Sohbet Says:

    thank you nice posting..

  1487. Adult izle Says:

    thank you nice posting!!!

  1488. Aöf Says:

    thanks, nice work

  1489. masa Says:

    thanks very nice article

  1490. Almanya Sohbet Says:

    thanks very nice article

  1491. sohbet Says:

    thanx is post admin

  1492. Almanya Sohbet Says:

    thanx is post admin

  1493. açık lise Says:

    nice blog. thnx admin

  1494. Irene Says:

    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!

  1495. Almanya Sohbet Says:

    nice blog. thnx admin

  1496. Website Design Question - AVForums.com Says:

    [...] 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 [...]

  1497. cinsel sohbet Says:

    I am curious to see what happens when I update the PC if it will end up messing something up in future updates

  1498. Almanya Sohbet Says:

    I am curious to see what happens when I update the PC if it will end up messing something up in future updates

  1499. Almanya Sohbet Says:

    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!

  1500. mIRC Says:

    thank you for admin :)

  1501. Almanya Sohbet Says:

    thank you for admin

  1502. Almanya Sohbet Says:

    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.

  1503. Msn Nicks Says:

    THANKS :)

  1504. 32qwdqefw Says:

    q3f4ewRebr

    eeee

  1505. etiket Says:

    great.. thank you :)

  1506. gay Says:

    thnkas you

  1507. Wil Craig Says:

    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);
    }
    }

  1508. Wil Craig Says:

    oops, variable height* sorry about that!

  1509. Pet Arkadaş Says:

    thanks you for

  1510. bayrakçılar Says:

    bayrakçılar sitesi

  1511. moda Says:

    greeat work mans thanks

  1512. istoç Says:

    Thank you for the perfect subject for an expression

  1513. Ríder Cantuária Says:

    this don’t work with monzila firefox….

Leave a Comment