• 24
  • Mar


I’ve 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 that repeated kept coming up was how to toggle the sliding with a single button/link.

This is a quite simple process. Let’s assume we have all the code already in place from the last tutorial. In your motionpack.js file, let’s add a new function at the very bottom, looking like this:

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

Now, stepping though this function is very simple. There’s an if-statement to check is the DIV is already hidden, or if it’s still visible. If the style.display property is set to “none”, then it’s hidden, so we slide the DIV down. If it is visible, the code jumps to the else statement, and slides the DIV up, using the same slidedown() and slideup() functions we used in the last tutorial.

Now, your link itself would look like this:

<a href="javascript:;" onmousedown="toggleSlide('mydiv');">Toggle DIV Slide</a>

This is assuming your DIV still has the ID of ‘mydiv’.

And finally, here is the new code in action:


Toggle DIV Slide

Enjoy! And also, I’m always listening for new ideas for tutorials. If there’s something you’d like me to explain, ask! :)

» Both comments and pings are currently closed.

277 Comments

  1. Harry Maugans » How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS Says:

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

  2. Dude Says:

    Hello
    Is it possible to add a hyperlink to a sliding div? That is, after if slides, it also opens something?

  3. Nerdly Says:

    Question (or idea), say your using it in a FAQ section, would it be possible to click on a 2nd link, and it would minimize the last one licked (or say all of them, for coding ease) and then slide open the new one?

  4. Harry Says:

    Nerdly,

    Certainly, the logic of your function would be as follows:

    - User clicks on a FAQ question
    - ShowFAQ(12) is called
    - ShowFAQ goes through a for() loop and calls slideup on every div from 1-XX. (calling slide up on a div that’s already up won’t do anything, i’ll exit on the 3rd line of that function).
    - ShowFAQ then calls slidedown(‘answer12′); or whatnot, to show the answer requested.

    Make sense? :)

  5. Nerdly Says:

    Actually it does. Now I just have to get to coding it.. I’m still learning Java of course :)

  6. Nerdly Says:

    Harry, I just wanted to follow up, after some reading on the for() loop, I figured it out.

    function faq(objname){
    var f=0
    for (f=0;f

  7. Nerdly Says:

    Woop, comments do not show it right, but needless to say I resolved it, Thanks a TON!

  8. Voland Says:

    Nerdly, you might sharing the way of doing the task you described for the noobs out there?

    Thanks!

    Harry thanks a bunch of an awesome guide!

  9. Mike 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” ?

  10. Arjun Says:

    Really a nice explanation. Good job.

  11. Microwise Says:

    I’ve been goin through the net searching for a good tutorial which does the slidin bit efficiently (and by efficiently, i mean easier for us coders as well! eheh) and this one explained it the best. now i can use this to enhance the way my sites work by a 100% for sure.

    Thanks man! ure a life saver!

  12. CasaS4 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!

  13. CasaS4 Says:

    OK, here is the code that I got to work:
    (in case it does not show up, you can go here: http://www.dynamixwebdesign.com/temp/function.txt)

    function menu(objname){
    var f=1
    for (f=1;f

  14. boris Says:

    Anyone figured out how to do this sideways?

  15. Nerdly Says:

    Sorry folks, it wasnt letting me post a url,

    (http://www.cavernprojects.com/projects/oneclick/)

    Hope that works.

  16. paharutz Says:

    Any alternative to invoke accessibility in case the user has java script turned off? They can`t see hidding content.
    Thanks, good project.

  17. Kev Says:

    Harry, great work!

    Any way I can get it to work with a none fixed div height? :P

  18. Phil Says:

    Hello and thanks for the work.
    It works great in Firefox and IE 7 but,
    when replacing the text link with an image it doesn’t work anymore in IE7.
    The image isn’t displayed.
    Weird hum ?

  19. Ady Says:

    what happens if you have a DIV in a DIV in a … get the idea, but i only want to show the one div, not all of them. your tutorials dont say what happens in that occasion,

    please help, i’m confused

  20. Brad Says:

    Mike: If you give the link anchor an ID, you can use JavaScript’s inner.HTML to change the contents. That’s what I’ve done in my implementation of this script.

    You can see it in action on http://www.solarblaze.com (where it says Expand Quick Comment), and the script is located at http://www.solarblaze.com/includes/divmotion.js

    The function I added is at the bottom (toggleComment)… notice the .innerHTML.

  21. Chris Says:

    I’ve been looking for this effect for about 4 days now, and finally stumbled upon this site, which is very close to what I was looking for. However, the actual effect I’m looking for is somewhat different. I have a horizontal navbar in the header of my site, and I’d like to use this effect to display the content of my pages. Basically, I want to set it up where, when the site initially loads, the content for the index page slides down, and when the visitor clicks link 2, the currently displayed content layer slides up into the header, and then the content for link 2 slides down out of the header. I’m thinking of making the site adjustable width as well, so it will be a minimum width of 740px (for 800×600 people), and expandable to a max width of 1200px (for 1280×1024+ users). So naturally, the sliding content will also need to be able to expand/ contract. I was also wondering if it was possible to make the content appear to be sliding along with the DIV, rather than the content remaining fixed while the div slides over it to appear to ‘cover’ it.

    This might be a big request, but the closest thing I can find is this: http://www.dyn-web.com/dhtml/slide/slide-onclick.html
    The linked example slides horizontally though, which is not what I’m looking for, and does not appear to be dynamically resizable. I like the acceleration/ deceleration effect in the linked example as well.

    Any help on this would be AWESOME, because I’ve been trying everything to accomplish this over the past 4 or so days, and have not managed to have any luck finding anything ‘just right’ for what I’m trying to do.

  22. Brad Says:

    Chris:

    All you need to do with that script is flip the X and Y values and it turns into a vertical slider. After a bit of playing I’ve modified the script to work like this:

    http://www.solarblaze.com/projects/div_slide/div_slide.html

    The source code is exactly the same as the example you linked to, except for the Javascript function in div_slide.html. It would need a fair bit of work to turn that script into one suitable for a live website, but hopefully this helps a little bit.

  23. Nik Says:

    This looks good and simple to understand the usage for non coders.
    But would it be possible to set the div height to auto? In that case you could use it to display dynamic generated lists like the sidebar menulist (categories, archives, etc.) of wordpress.

  24. steve Says:

    I really like the codes. Thanks for sharing. However I encounter a strange problem. It works fine in Firefox but in IE it gave me strange result. It doesn’t display anything that it was supposed to display, after the line :
    “”
    When I take this line off, the rest of the display shows up. Anyone encountered such a problem?

  25. steve Says:

    Oops.. for some reason the line I was talking about didn’t show up. Anyway it is something like (with the and quotes taken out) :

    script type=text/javascript src=/javascripts/motionpack.js

  26. steve Says:

    Sorry, one more thing. If I paste the entire codes directly into my html file, it’ll work fine in IE. I’m not much of a javascript person so I am not familair as to why specifying a javascript file as a ‘src =’ mentioned above blocks all other display after that line.

  27. steve Says:

    A final comment… my problem has been resolved. It has nothing to do with your codes Your codes work great in firefox, IE and Opera.

  28. slartsa Says:

    Hi, I see the link that triggers the new div to open up, goes “active”, meaning those gray dots stay around the text link itself after you have clicked it and they stay until something else on page is clicked.
    I’m using this script and I’m having an image as a trigger link and it looks rather gnarly with surrounding dots..

  29. shaiza Says:

    Hi,
    Can u help me to write the javascript for a login just like in http://www.playfirst.com where when u click on login a rectangual box for login pops…
    Thanku

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

  31. Nanda Says:

    Thanks so much for this script, works great and saved me the brain power of figuring it out myself :) , much appreciated!

  32. Dan Says:

    This effect is a huge improvement upon the instant jumping of page content. I’m very impressed and interested to see creative applications of this function.

    I wonder if it’s possible to make a similar effect without using client-side scripting? Making use of the CSS hover effect perhaps?

  33. Erik Says:

    Thanks alot! This really helped me, excelent script, great guide!

    / Erik from Sweden

  34. Anthony Says:

    Hi there … thanks for this great tutorial its really helped me get my head around implementing js into html – I was wondering how you would go about attaching bounce or elastic fx to this kind of scenario?

    Thanks

  35. riomx Says:

    Hi Harry,

    Your tutorial is awesome and I’m going to use it to create a presentation for a blog design at my job.

    I’m setting up a skeleton layout that will show blocks with text labels for where things should go, such as recent posts, recent comments on the left nav, and content on the right side of the page. When people click on the labels, the content will populate

    My question is, will this method allow for multiple objects to be shown at once and toggled independently ?

    Thanks !

  36. Harry Says:

    Riomx,

    Yes! This framework is made to handle multiple objects on the same page, and they’ll all function independently. You can even have multiple animations going on concurrently without any problems. :)

    Good luck with your presentation.

    - Harry

  37. alex Says:

    Hi Harry,

    Really great framework! One small problem, however. I’ve been implementing a horizontal version of it on this page:
    http://www.onenightgrandstand.co.uk/
    When you click on the logo in the top left corner, it slides out what will become a meta menu of sorts. While it works perfectly in Safari on OS X, the sliding animation doesn’t work in Firefox or Opera, it just pops the div right up rather than animating it.

    The only thing I’ve changed in the javascript is changing all instances of “width” to “height”, but it didn’t work when it was scrolling vertically either.

    Any suggestions? I’ve been trying to go through the javascript and find out where it’s going wrong, but can’t seem to find a solution. Cheers!

    -Alex

  38. Andrew Says:

    First off, thanks so much Harry for this amazing script.

    However, I tried Olivier Suritz’s suggested method (from the first tutorial) 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!

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

  40. Andrew Says:

    First off, thanks so much Harry for this amazing script.

    However, I tried Olivier Suritz’s suggested method (on your other Div tutorial) 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!

  41. Pixie Says:

    One of the best tutorials out there! Very good job :-)

  42. Dan Says:

    Hi Harry, nice effect and very user-friendly tutorial. It took me only a few moments to utilise this technique for redevelopment of a section on our site but unfortunately after some playing around I’ve realised that the css handling differences between IE and FF make the use of this impossible. Have had issues with having divs chained together and alignment. But it is an excellent effect and I will keep it in mind for other uses, thank you. :)

  43. Dan Says:

    Actually, further to my last post 20 minutes ago, has there been a way to do this with height: auto on the toggle divs? If that has been discovered/invented/created I think I can actually use this system for what I wanted, which would be rather seriously nice.

  44. zthenk Says:

    Nerdly,
    thx it works nicely using the for loop, I do have a question for you and anyone who can help, although it works fine in firefox and IE7, when I check the error console it shows:
    “document.getElementById(objname) has no properties” Line 27
    If anyone can help cause I’m not really good at tracing this kind of error.

    They are working nicely though, so either way thanks.

  45. Marc Becquey Says:

    Hi Harry! I wanted to thank you for a great script, I’ve implemented it in one area and it’s working perfectly.

    I’m stuck with a bit of a dilemna though and I’m not sure how to proceed. On the same page, I’d like to use your script to do something slightly different.

    I’d like a box to be visible initially with just a height of 94 px though the height of the actual content would be approximately 300 px (overflow would not be visible initially). What I would like it to do is when the toggle button is clicked, I’d like the full content of the div to be visible (without scrollbars).

    Is this possible?

    The URL is:
    http://www.shopters.com/0/advanced_search_result.php?keywords=steak&categories_id=&inc_subcat=1&manufacturers_id=&x=28&y=13

    or you can go to
    http://www.shopters.com/0/search.php
    and use “steak” as the search keyword.

    I currently use your script to expand/collapse the advanced search function on the page and it’s simply perfect. :-)

    Thanks in advance!!!

  46. Converting Visitors Into Subscribers | Andy Beard - Niche Marketing Says:

    [...] to get things working the way I wanted. The first code I referenced was from Harry Maugin's tutorials on animated divs although I actually ended up just downloading the version of the code Brad from Solarblaze [...]

  47. Oli Thorst Says:

    Nice code. What about multiple divs? Show only one div at the time.

  48. MontyV Says:

    Oli Thorst…regarding multiple divs. Just create another DIV and make sure you change the toggleslide from ‘mydiv’ to like ‘mydiv2′.

    I have another question though. How would i insert an image like a “+” and “-” slide open the content and slide up? I mean the plus sign would be to open it and the minus sign would be to close it. I know this is possible with your two link method for up and down but how do I get it to change images with only one showing. So plus when I need to expand and minus when it is displaying and needs to be closed?

  49. MontyV Says:

    Thanks Brad. That is what I was looking for but does this work with images? If so do I add that in the function? Any assistance would be great.

  50. Oli Thorst Says:

    I think that my question was not clear enough. What I was thinking about is when I have many div’s (in my case 18), how can I make sure that when one div opens the last one closes.

  51. Dale Says:

    Thank you so much for this excellent tutorial. I tried the mootools sliding div and everything was great until I tried it in IE7, the site wouldn’t even finish loading. Frustrated I stumbled onto your site. Great work here, thanks again.

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

  53. Sam Says:

    Hey guys, noticed a lot of activity here, I am working on a fairly simple expansion on the original tutorail. I would like to see if there is someone who might be able to look at my example and help me clean it up a little. There are three things that I am wrestling with right now, one being the DIV height autoing (would be really nice) also I have added a simple +/- graphic to work with the sliding div, so it gives you a status if it is open or closed right. I have my example up at:

    http://www.ncdesigns.ca/example.html

    As you can see my example says expand, and the icons change, but they don’t quite change properly, it only changed if you are active on the link and press it again, but if you try to expand the second one it opens up but dosen’t change the Icon to a minus symbol. Now I would like it to say “Contract” or “less” etc. the wording is minor, but it stays Expand, I know there is away to do it, just not a Java man, more in the graphics.

    One last thing, the way I have it structured I have to write the code over and over again if I wanted 10 Divs, and 10 graphics, is there a way to make it use one function with seprate div & ID references? It would be great.

    Thanks so much in advance,
    Sam

    email me directly: sam@ncdesigns.ca

  54. Sam Says:

    ****Not sure if the first one posted****

    Hey guys, noticed a lot of activity here, I am working on a fairly simple expansion on the original tutorail. I would like to see if there is someone who might be able to look at my example and help me clean it up a little. There are three things that I am wrestling with right now, one being the DIV height autoing (would be really nice) also I have added a simple +/- graphic to work with the sliding div, so it gives you a status if it is open or closed right. I have my example up at:

    http://www.ncdesigns.ca/example.html

    As you can see my example says expand, and the icons change, but they don’t quite change properly, it only changed if you are active on the link and press it again, but if you try to expand the second one it opens up but dosen’t change the Icon to a minus symbol. Now I would like it to say “Contract” or “less” etc. the wording is minor, but it stays Expand, I know there is away to do it, just not a Java man, more in the graphics.

    One last thing, the way I have it structured I have to write the code over and over again if I wanted 10 Divs, and 10 graphics, is there a way to make it use one function with seprate div & ID references? It would be great.

    Thanks so much in advance,
    Sam

    email me directly: sam@ncdesigns.ca

  55. Graham Says:

    has anyone got a working copy of the Olivier Suritz code, can you post a link to .txt file as this blog reformats the quotes.

    im having problems with this line:
    timerID[objname] = setInterval(‘slidetick(\” + objname + ‘\’);’,timerlen);

    as you can see there is an open double quotes and no close of it, is this correct ?

    Also has anyone solved the cross browser issues ?

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

  57. plonewars.com - » Harry Maugans » One Click Toggle for Sliding, Animated DIV Says:

    [...] Harry Maugans » One Click Toggle for Sliding, Animated DIV By Yoda Harry Maugans » One Click Toggle for Sliding, Animated DIV [...]

  58. Jeev Says:

    I was following the above thread and have a problem of my own. I have 2 DIV section which are initially hidden. I want to show DIV 1 on form submission followed by DIV 2. I have tried changing the display style on onsubmit event but it doesnt work.

    Does it nt work. Can anybody help ?

    Thanks in advance.

  59. Ibrahim Says:

    Excellent. Just one concern though — Javascript is 3KB, which is quite a lot!

    Thanks anyway.

  60. Ultrakleines JavaScript - steffenzerbe.de Says:

    [...] möchte ich darauf hinweisen, dass dieses Script nicht aus meiner Hand stammt, sondern von Harry Maugans. Nach langer Suche habe ich endlich eine Anleitung gefunden, die mein Vorhaben gut beschreibt, [...]

  61. Steffen Says:

    I just translated your tutorial into german. I hope it’s okay for you :)

  62. MontyV Says:

    Great work Sam. I like the new update and that is exactly what I was looking for. Did you update the motionpack to incorporate the +/- signs or was this just added into the page?

  63. MontyV Says:

    Correction I just noticed that you added an swapimage function. Can these be added to the motionpack or does it need to be loaded on the page?

  64. LL Says:

    As you said, almost anything can be placed in the animated DIV. Nonetheless, when I try with an applet the code gets all weird, there’s no animation at all and the DIV overlaps the elements belowit. Is there any way of applying the same code to a div with an applet? That would be a good point to clarify! Thanks!

  65. dustin Says:

    anyone have any examples where multiple pieces of content (can slide open/closed) where one piece of content is already open, and if a new one is opened, all the others will close? Thanks! :)

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

  67. Zac Says:

    It’s good so many pepole are willing to share their comments and stuff from their own projects. Harry thanks 4 great tutorials! you could make about another 3 tutorials just from the omments u get, WOW!

  68. Zac Says:

    just looking at what cole said befor me..
    Cant you jus use the ‘onclick’ attribute of the button ellement??????
    something like this…

    Gedit?

  69. Rafael Says:

    This is a very nice idea. However, I really don’t like the idea of using inline event handlers and especially the idea of putting tags in the body. So I’ve written an unobtrusive version, which is also a bit more flexible:

    http://raffles.awardspace.com/javascript/drawer.html

    I hope you like it.

  70. Rafael Says:

    Er, by that I meant “script tags”.

  71. Latika Says:

    This is great — i implementing the sliders on my page to display form by sections and to display error messages :-)

  72. Latika Says:

    Forgot to say:
    Great Work — making my life easier :-)
    This was something that I have been looking for — for a long time.
    Code is simple and easy to understand and update.
    THANKS!!

  73. tylert Says:

    Harry,

    I cannot figure out how to get Nerdly’s solution to work properly. It works dont get me wrong but there is a Javascript error. Here is his URL from above..

    http://www.cavernprojects.com/projects/oneclick/

    Upload page load it does not give you an error but once you click on one of the menu items it produces an error. Here is the error it gives in IE7..

    Line: 28
    Char: 9
    Error: Object Required
    Code: 0

    If anyone can help on this I would greatly appreciate it.

    Thanks,
    -Tyler

  74. Sussex Web Design Says:

    I use this one a lot, is there a way it can slide out to the left or the right??

    Would be great if there was!

    Thanks

    Pixie

  75. Samir Shah Says:

    This is really gud one.
    Thanks

    Samir Shah
    http://www.eatingout.co.in

  76. Abrir e fechar div com motionpack.js Says:

    [...] http://www.harrymaugans.com/2007/03/24/one-click-toggle-for-sliding-animated-div/ [...]

  77. Rob Says:

    How do you use this with forms? The s not a problem, but buttons don’t work. Anyone got a solution?

  78. Rob Says:

    Sorry, last comment didn’t display properly.

    Basically, I have a form in a div that is the one used for this effect. In Firefox 2 it all works fine, but in Internet Explorer 7 the submit button just appears as soon as the slide happens, so it doesn’t look right. Anyone got a solution?

    Thanks, Rob

  79. paul Says:

    I’m trying to implement this code in my new site where there are multiple slideable divs lined up next to each other. I have the code all set up (link slides it down, move the mouse off the div and it goes back up) but it doesn’t work correctly. When I slide down the first one, the second link goes down with it, and when I slide down the second one, it moves underneath the other one. Please help!

  80. Christian Says:

    I have this script working on a website, which also includes lightbox…but the lightbox seems to be disabled now. Any fix for this?

  81. kc Says:

    Hey guys .. im still in the process of learning JS but trying to create my nav menu to have the drop down effect so it animates w/o flash … and i dont find the css hover to appealing.. so i found this site.. it great.. but need a little assistance in creating the menu

    this link: http://www.ciplex.com/ is the kind of menu i want.. is this tutorial putting me on track? any willing to guide me thru this process?

  82. Ibrahim Says:

    Hey Harry,

    Great stuff. One thing though…can different effects, fade for example, be given instead of slide?

    Thanks.

  83. Tony Says:

    Thankyou for this, its brilliant.

    Is there any way to have the DIV open as default, rather than closed?

    Thanks again

  84. KennethB Says:

    Has there been any way to make the effect with dynamic height? I would like to know, if there is a way…

    xzuz3lx (a) gmail (.) com

    Thank you!

  85. Sarath A Says:

    Awesome tutorial. Simple and easy to understand. Godsent for newbies.. thanks a lot

  86. Alidad M Says:

    this is great but i have question , instead of click the link that slide down and click link again that slide up, how is that works if i want to use mouseover that allow me slide down and mouse out slide up? how do i can write that code!

    please help thanks.
    AM

  87. Leon Barrett Says:

    Brilliant, and so easy to implement.

    I’m currently using it on my site (www.sizzla-media.co.uk) to add AJAX style interactivity to my suite of online web apps.

    To see it, you will need to create an account – http://www.sizzla-media.co.uk/register.asp,

    and then head for either myCal (to show events for today) or myDocs (to send doc via email)

    Thanks, its worked a treat

  88. Leon Barrett Says:

    Brilliant, and so easy to implement.

    I’m currently using it on my site (www.sizzla-media.co.uk) to add AJAX style interactivity to my suite of online web apps.

    To see it, you will need to create an account – http://www.sizzla-media.co.uk/register.asp

    and then head for either myCal (to show events for today) or myDocs (to send doc via email)

    Thanks, its worked a treat

  89. Brain Says:

    I have trouble with the sliding DIV. The buttons would not show up.. can you help me with this?

  90. Brain Says:

    I’m sorry i found the bug… i forgot to change the height…

    this is a very useful code.. i use it in my application for my campus project.

    THX A LOT

    HAPPY NEW YEAR!!!!

  91. Webmaster 38 » Blog Archive » Sliding, Collapsible DIV at ajax scripts compound Says:

    [...] Sliding, Collapsible DIV [...]

  92. ChrisV Says:

    Thanks for giving us a great script with great explanation, Harry.

  93. Hitchhiker Nation Says:

    I Think, İt’s Very Nice…

  94. Jumbo Jim Says:

    Hi, is there a simple way (i’m sure there is but I’m a code idiot) that i can make it so it’s starts in the open state and then you click to collapse?

    thanks for the script!

    Jumbo Jim

  95. formlesstree4 Says:

    OK, upon adding multiple div’s to collapse separately, one does the animation nicely, but the other one does not do it….is it because of the fact that it goes beyond the page and forces it to scroll or what?

    Lemme rephrase that:

    One Div goes past the page length, and that is the one that does not do the effect. The other one does….does that have anything to do with it?

  96. Jon Says:

    I have a question, so I put this slide into a portfolio viewer for my own website and i have bars that are clicked slide to reveal the site or work ive done with a graphic etc. what i was wondering is if anyone knows how i could have one of them defaulted open when someone comes to my site the first one is open for example. and then as well how i can get only one to be open at a time. for example someone clicks like the 3rd one and it opens then clicks the 5th one i want then the 3rd one to close by itself so theres only one open at a time. thanks

  97. Eddie Says:

    Jon:

    Whichever one you want defaulted open, set its display to block (or anything other than none, really), and it will default to be shown, but the code will run correctly when you want to collapse it, etc.

    ex:
    div id=”loc1″ style=”display:block ; overflow:hidden; height:260px;”

    For the “only one open at a time”-thing, use nerdly’s for-loop up near the top of the comments on the page.

  98. Jon Says:

    Hey Eddie, thanks alot man I appreciate that

  99. Jen Says:

    Is there a way to make this sliding div appear “on top of” the content below it, rather than pushing the page content down when it slides open? Thanks for the help so far!

  100. merman7 Says:

    What a KICK-A tutorial.

    I seem to be having the same issue as many others and I know it is simple, though my lack of JS skill is leaving me slightly frustrated.

    I currently have 2 expanding sections on my page, but when I click on one it opens the other…

    I read a thread about naming the 2nd, etc. Divs something else, like mydiv2 and so on. will this require me to produce 23 js files? or can I string the names along in the js file?

    This feels like a dumb question, but I would appreciate some help!!!

    Thanks

  101. liquiddag Says:

    I would love to know how to change the direction of the slide. For sliding say a header the current direction works perfect, but to slide a footer this makes the animation look awkward.
    BTW, great tutorial. Not many on the web are as informative and free.
    Great, great work.

    I would greatly appreciate the help!

  102. lev Says:

    merman7, you will not need 23 js files…

    You only need the one, but give each div that you want to slide an id, and then use the same id when calling the function ie:

    slidedown(‘div1′)
    slidedown(‘div2′)

  103. david Says:

    Hi,
    I’m trying to use toggleSlide(objname) in a formview template. When I click to expand part of the EditItemTemplate it throws an invalid argument error on the line:

    obj[objname].style.height = d + “px”;

    in function slidetick(objname)

    Any ideas what the problem may be ??

  104. SPK Says:

    Great stuff Harry; love your work.

    Just wondering how to get the browser to scroll down, if a div is expanded at the bottom of the page.
    That is, if I have a div hidden in the footer and it expands, how do I get the browser to scroll to show the new div?

  105. Funk Says:

    Beautiful work!

    I saw a similar question go unanswered in the ‘non-toggle’ tutorial you did previously.

    I am wondering; why cant I seem to place the ‘mydiv’ stylings in an external stylesheet? The script will only work for me if I style the div in the html?

    Thanks in advance!

  106. Jennifaer Says:

    to encroach upon its freedom, or to diminish its security. In free first time lesbian stories restraints detain in Spain and Portugal, must, in proportion to hsnrihvjdrj

  107. Davywis Says:

    town, is limited by the demand of that town and its neighbourhood. The free first time lesbian kiss video clips his own peculiar branch, more work is done upon the whole, and the quantity

  108. Romeqcro Says:

    drawback of the duties upon brimstone and saltpetre imported. In amateur first time lesbian greater advantage over an equal capital employed in the carrying trade. The

  109. Adawtms Says:

    to such a country as Great Britain, of which the defence and security depend first time lesbian shy amount to a prohibition, and when they established the bounty,

  110. Neszal Says:

    should exchange for one-and-twenty shillings, or be a legal tender for a debt first time lesbian any other human institution, can have any such effect. It is not

  111. Neszal Says:

    should exchange for one-and-twenty shillings, or be a legal tender for a debt first time lesbian any other human institution, can have any such effect. It is not

  112. Nexnal Says:

    The ancient policy of Europe, instead of discountenancing this lesbian first time vid clips likely to be relieved by the plenty of some other. But very few

  113. Romevyro Says:

    corn laws can do in Great Britain. And, secondly, this bad policy first time lesbian video they would find in their ordinary customer, the wealthy corn

  114. Adaszms Says:

    necessary. It increased the business of the corn merchant in cheerleader lesbian first time some measure enjoined to do to divide his capital between two

  115. Adarems Says:

    can commonly afford his goods somewhat cheaper, than if his stock 18yo first time lesbian .19,000,000. No accumulation could have supported so great an

  116. Nedoal Says:

    the Corn Trade, does not exceed that of one to five hundred and lesbian first time stories than if he had been a native, by one man only and the value of their

  117. Bodslton Says:

    necessity of these temporary statutes sufficiently demonstrates first time lesbian kiss the neighbouring countries, the government would have no occasion

  118. Adacems Says:

    purchase. In consequence of its being the measure of value, we first time lesbian kissing distress to the avarice of the corn merchant, who becomes the

  119. Davixis Says:

    vigilant and severe the police which looks after the execution of first time lesbian using toys foreign trade, indeed, were greater than usual during the whole

  120. Romebxro Says:

    in such countries, therefore, that he generally endeavours to first time lesbian toy retailer. They must generally, too, though there are some exceptions to

  121. Dugdrr Says:

    money than he might expect in a foreign market because he saves cheerleader lesbian first time produce equally with that of a native, by exchanging it for something for

  122. Maregy Says:

    situation, of the rich country. The silks of France are better and cheaper free first time lesbian video clips of Portugal to Poland, replaces by every such operation two capitals,

  123. Jennbwifer Says:

    to be let to a tenant for rent, as the house itself can produce nothing, the shy lesbian first time considered as worth a shilling, and a shilling can at any time be had for them. Even before the

  124. Maruoy Says:

    premiums, besides, is very trifling, that of bounties very great. 18yo first time lesbian bullion either for the use of exportation or for any other use. There subsists at present a like

  125. Linkida Says:

    certain quantity of flax and hemp, than would have been necessary, had the free first time lesbians water above, and more below the dam-head, and it will soon come

  126. Jennusifer Says:

    Portugal than in any other part of Europe. The difference, how. first time lesbian coeds themselves for about a century and it was only indirectly, and

  127. Annigela Says:

    goods destined for purchasing money. But it is but a very small first time lesbian shy Portugal. Open the flood-gates, and there will presently be less

  128. Newaal Says:

    exportation but all grain was rated so low in the book of rates, first time lesbian lick naturally destined. To attempt, however, prematurely, and with an

  129. Linbcda Says:

    measured and determined corn is. The real value of every other first time lesbian experiance profit which he makes by it in this way much more than compensates the

  130. Bodulton Says:

    make the retailers both sell cheaper and buy dearer, than if the whole trade my first time lesbian engrossers and forestallers, does not repeal the restrictions of

  131. Romegfro Says:

    ounce, he gains a hundred per cent. by the bargain, just as much as if an ebony lesbians first time nature, that the wealth which consists in them cannot be much

  132. Boyalton Says:

    likely to be the immediate demand. With all their attention, however, they sometimes overdo first time college lesbians capital of any country into the carrying trade, than what would naturally go

  133. Linfada Says:

    value comes to be liable to the same sort of uncertainty to which all other weights and first time lesbian movies of buying and disposing of his goods, that with the same capital

  134. Romekbro Says:

    dexterity of the person, of whose life it has been the sole business to first time lesbian stories consumption, by the value of the surplus produce of the whole country, and

  135. Adadpms Says:

    not for its own sake that men desire money, but for the sake of first time forced lesbian It is thus that the same capital will in any country put into motion a

  136. Linqnda Says:

    there or not At this moment I am not disposed to accost her wrestling lesbian he stood at Miss Ingrams side She turned as I drew near, and

  137. Marafy Says:

    small feet as if a man had anything to do with beauty As if lesbian forced me nun like ornament of a string of ebony beads and a crucifix This I

  138. Adapums Says:

    I tell you I could not forget it and I took my revenge for you lesbians feet licking The crows sailing overhead perhaps watched me while I took this

  139. Bosrlton Says:

    heard her with my own eyes She was a big woman, and had long black lesbian free clips Georgiana, when not unburdening her heart to me, spent most of her

  140. Adahgms Says:

    but now I have a particular reason for wishing to hear all about spicy latin lesbians At the churchyard wicket he stopped he discovered I was quite out

  141. Bowhlton Says:

    presently perceived she was (what is vernacularly termed) TRAILING lesbians in office kissing January, began to heal and subside under the gentler breathings of

  142. Romehrro Says:

    rich Mr Oliver and his daughter lived I hid my eyes, and leant my lesbian mom and daughter all was wintry blight and brown decay I shuddered as I stood and

  143. Davhfis Says:

    night She stood at the bottom of the long room, on the hearth for ebony lesbian makeout that I and Adele shall be both safe out of the house before your

  144. Anhkgela Says:

    out with a great wound in his throat, or with a swollen and daily lesbian clips mouth for an instant as it passed away she turned and left the

  145. Bolilton Says:

    plateful was apportioned to each pupil I ate what I could, and ebony lesbian makeout niece, Jane Eyre, and to tell me how she is It is my intention to

  146. Nepfal Says:

    better change your frock now I will go with you and fasten it sandy blonde lesbian watched her glide along the gallery, her quiet tread muffled in a

  147. Romeavro Says:

    go down but I took her on my knee, and gave her to understand that lesbian first time with girl ajar What beautiful ladies cried she in English Oh, I wish I

  148. Bouhlton Says:

    left on me an impression of high born elegance, such as I had never spicy latin lesbians advanced, a sound of music issued from the drawing room, whither the

  149. Adairms Says:

    stronger among the girls ran about and engaged in active games, but lesbian emo action paying the interest of mortgages John gambles dreadfully, and

  150. Jennoxifer Says:

    Indeed he is in three days, he says that will be next Thursday dominatrix lesbian online stories head dropped on them And now I thought till now I had only

  151. Adarqms Says:

    night, I thought unaccountably of fairy tales, and had half a mind one on one lesbian twins wanted missis to give up all to him Missis refused her means

  152. Adaqoms Says:

    gulf it felt the one point where it stood the present all the chubby lesbians kiss paying the interest of mortgages John gambles dreadfully, and

  153. Bolblton Says:

    on my comprehension that Helen Burns was numbering her last days in stephanie mcintosh lesbian kiss occurrence Winter snows, I thought, had drifted through that void

  154. Lincsda Says:

    never was a wild man, but he got dangerous after he lost her He lesbian wrestling nina aware, sir, whether or not this gentlemans wife is still living

  155. Nesnal Says:

    coach, gave a box I had into the ostlers charge, to be kept till I goth lesbians with strap ons into the drawing room while it is empty, before the ladies leave the

  156. Marfvy Says:

    herself out of her chamber, and go roaming about the house, doing chubby lesbians kiss Brocklehurst, of Brocklehurst Hall, in this county Let your

  157. Durnrr Says:

    have long been much reduced by his extravagance so he went back lesbian wrestling face sit my usual self that it seemed almost the image of a stranger

  158. Romepjro Says:

    like a pillar these features appeared to me not only inflated and lesbian public kissing fortune she had taken care to secure and when her mother died and

  159. Romegnro Says:

    pronouncing your name and at last she made out the words, Bring free lesbians 30 second videos for you The young ladies put it off at first but their mother

  160. Davbbis Says:

    Why are you come here, Jane It is past eleven oclock I heard lesbian public kissing little child and that to dream of children was a sure sign of

  161. Adanhms Says:

    hushed in my arms, sometimes dandled on my knee, sometimes watched daily lesbian clips I afterwards saw the name written in a prayer book intrusted to me

  162. Jennvlifer Says:

    intolerable, in short A crimson velvet robe, and a shawl turban of celeb lesbian action now nearly sick from inanition, having taken so little the day

  163. Davsjis Says:

    Will you hand Mr Rochesters cup said Mrs Fairfax to me Adele lesbian prison stories struggling to quit its material tenement flit when at length

  164. Marsyy Says:

    felt sure was Eliza, though I could trace little resemblance to her lesbian massage parlor punishment beyond her situation of something not round her nor

  165. Marnpy Says:

    compartment, from passage to passage, of a large and irregular strap on free video lesbian with measured deliberation A vision, as it seemed to me, had risen

  166. Dumrrr Says:

    grass and weed grew here and there between the stones and fallen amateur lesbian clip she seemed dearer to me than ever I felt as if I could not let her

  167. ScoobyDooobyD00 Says:

    I want to use this on a site that I’m currently managing :) But my problem is that they want me to use it in this way

    Hello everyone I’m… “More” and if they click on more the text dropdrops down below.

    Like this

    Hello everyone I’m
    ScoobyDooobyD00

    I want it to do this

    Hello everyone I’m ScoobyDooobyD00

    Its like 5 lines long so it’ll do a drop down animation thanks, Scooby!

  168. Bopwlton Says:

    together He did not like to diminish the property by division, and compass bank online banking gently assured her that I was the person she supposed and desired me

  169. Jennheifer Says:

    to these details Bessie listened with interest they were precisely travel maps directions the attention she had received and I even got hints of the titled

  170. Marhpy Says:

    stark, chill, livid corpses that could never revive I looked at my driver direction No, no let us be gone, was the anxious reply and without waiting

  171. Linseda Says:

    home only to die some died at the school, and were buried quietly compass tattoo charms He was fond and proud of me it is what no man besides will

  172. Marmgy Says:

    came two open carriages Fluttering veils and waving plumes filled world weather map further to express, What the deuce is it to me whether Miss Eyre be

  173. Anqhgela Says:

    rest How hurried was their first glance But how they fix How canada map direction seems to have more length of limb than vivacity of blood or vigour

  174. Romevdro Says:

    silence of the dormitory, that my companions were all wrapt in airline compass vouch for its contents being original but dont pass your word

  175. Linyhda Says:

    You shall tell me this part of the story another time, I said developing mapquest maps whispered her longing to be restored to her divine Fathers bosom

  176. Adavpms Says:

    thought, as I surveyed the effect they want more force and free maps and directions Oh, dont refer him to me, mama I have just one word to say of

  177. Jenndiifer Says:

    It is well I drew the curtain, thought I and I wished fervently driving directions traffic map make All I had gathered from it amounted to this, that there was a

  178. Maruhy Says:

    disembodied souls I was still listening in thought to her well developing mapquest maps as I had neither joined my hands, nor bent my knees, nor moved my

  179. Nehdal Says:

    for my benefit The communications were renewed from day to day map of the us place, it seems to me I should wish the earth to open and swallow me

  180. Marwzy Says:

    poplars Mary was too slim for her height, but Blanche was moulded mapquest road atlas contents of my cup into my saucer, I did not choose to consider

  181. Jennotifer Says:

    and not alone either I dont know how many of the fine people at compass learning odyssey at the foot of the sign post of Whitcross, waiting the arrival of

  182. Nendal Says:

    into temptation the spirit, I trust, is willing, but the flesh, I mapquest directions for katy texas from dallas texas clang of the bell steps, too, often traversed the hall, and new

  183. Jennbuifer Says:

    galloped at her side the two rode a little apart from the rest I map whitewood sasktachewan map quest my arms and carried her off to bed It was near one before the

  184. Jessie Says:

    door The clergyman stayed to exchange a few sentences, either of first time lesbian teach video demonstration of a half moon just setting, whose rays streamed through the narrow sagtdbuzini

  185. water 4 gas review Says:

    Harry,
    I have a doubt, Is it possible to add a hyperlink to a sliding div? That is, after if slides, it also opens something? Thanks in advance…

  186. John Diaz Says:

    For divs with auto height simply put the div height 100% and change this line of
    code from:

    obj[objname].style.height = endHeight[objname] + “px”;

    to:

    obj[objname].style.height = endHeight[objname] + “%”;

    see it in action at:
    http://www.mercadomoto.com

  187. دردشة Says:

    thanks my lord
    ^_^
    I see That

  188. splorp! Says:

    I’ve been using this long enough to thank you for it, Harry. I do have one bit of weirdness. On a Win98 system (not mine) running Firefox 2.0.0.14, the menu contents get cut short. It displays properly in IE6. I’ve tried modifying the script as John Diaz mentioned above, but that didn’t work.

    Anyone with access to a Win98 machine running Firefox check to see what I’m missing? (Click into the Interesting Sites link to see how the link beneath Maxwell Edward gets cut off (I can provide a screenshot if anyone who might be able to help thinks that will help).

    splorp!
    Evil Bastard

  189. Mike Says:

    Hello,

    at first for most Browser is this very , better a brilliant script, but it have one problem. I have your script complety programmed in dreamweaver, i used the original name, and i controlled also the complety source code. But when i test it in the Safari browser it will be not work. Gives anything problems with Browser, because the were very pity. The Safari Browser and APPLE have more and more fans, and APPLE works on a stable Safari Version for Windows System. And now many people use this one, what is when Safari is stable and the Windows User will be also use this one.

    Maybe it is a bug, but this is the first bug what find, all other Websites makes no problems. Maybe you anybody have a possibility fix this bug.

    THX
    Mike

  190. Jess Says:

    Awesome tutorial! Thanks so much!

    I have a question that’s driving me crazy and I hope someone can help. I have a div that’s populated with ten images through WordPress, but I’d like to set it up so that only four images are seen initially with the remaining section of the div hidden until toggled. So say the top 40% is always viewable with the remaining 60% slideable. I can’t for the life of me figure out how to do this with a single div.

    Anyone know? Is it possible?

  191. hedi Says:

    nice tutorial
    thanks

  192. hakan Says:

    Thanks

  193. Johnny Says:

    Here is how you AJAX guys can set a dynamic height.
    add this function to the js file

    var endHeightDynamic;

    function getDynamicHeight()
    {
    if(!endHeightDynamic)
    endHeightDynamic = document.getElementById(“clientDivWrapper” ).scrollHeight;

    return endHeightDynamic;
    }

    Then change this line of code
    endHeight[objname] = parseInt(obj[objname].style.height);

    to
    endHeight[objname] = getDynamicHeight();

  194. reader Says:

    what is with all the spam above? can it be removed? i’m so sick of spammers

  195. Paul Vincemike Says:

    Thanks Johnny for that solution!

    I’m just a beginner so I just copy-pasted it but it didn’t seem to work so i tweaked it a little.

    For those who wants to use dynamic height, here’s a simple solution (some modification from johnny’s solution)

    ———-i added objname from the function—–

    var endHeightDynamic;

    function getDynamicHeight(objname)
    {
    if(!endHeightDynamic)
    endHeightDynamic = document.getElementById(objname).scrollHeight;

    return endHeightDynamic;
    }
    ———————————————————–

    add this code
    —————————————————————-
    endHeight[objname] = getDynamicHeight(objname);
    —————————————————————–
    at the bottom of -> function toggleSlide(objname)

    comment out
    —————————————————————
    endHeight[objname] = getDynamicHeight(objname);
    —————————————————————-
    from -> function startslide(objname)

    That’s it! Enjoy!
    Btw, sorry for my bad english T_T

  196. Paul Vincemike Says:

    sorry, there was a flaw,

    comment out
    ——————————-
    if(!endHeightDynamic)
    ——————————-

    from -> function getDynamicHeight(objname)

  197. Prasad Says:

    Paul Vincemike… You are the man… :D and also thanks Jonny :D
    Thanks harry for this script…

  198. Anne Says:

    Lovin’ you, Harry!!!! Thanks for the walk through. As a total newbie, you’ve handed me a Rosetta Stone.

    I tried to use this in a table column, and it blew up the column to ridiculous proportions – WAY off the screen. Is there something I could do differently to make it work?

  199. Me Says:

    Please help me with coding a soft js menu

  200. John Says:

    Awsome!…very enlightening

  201. Stuart Elliot Says:

    How about you guys, you are genius’s

    Got the Dynamic Content Size Working along with all the other scripts on this tutorial.

    http://creative-stuart.dyndns.org/templar-windows/index.php

    Would like to know. is there anyway of storing a cookie on people pcs to store which Div’s are open or closed. so when they navigate round the site. if they return to the homepage, it all looks the same.

    Thank you

    Stuart Elliot

  202. Stuart Elliot Says:

    Found a Problem, With Dynamic Height, if you have more than one box. if you open one box and close it.

    all the other boxes are set to the height of the box you first open.

    http://creative-stuart.dyndns.org/templar-windows/index.php

    Check this website for examples of the errors..

  203. Stuart Elliot Says:

    Forget my last post. ive fixed it.

  204. Benji Says:

    hey i’ve been driving myself crazy i just wanna get that same effect but sliding from bottom to top, any ideas?

  205. Shah Says:

    Hi friend,

    I am new to javascript. so can you give full code for Dynamic height div, because i have a div will load dynamic contents….
    thanks in advance….

  206. Pepejuancho Says:

    Hey I am using the dynamic height thing. it seems to work but I have a slight problem. When I click the toggler the div unfolds and folds again and the script starts working as it should from the second click. Do you know anything about this. Anything that might be causing this to happen?

  207. Phill Pafford Says:

    Hey All,

    Started to play around with Sam’s post above about the toggle images for + & – when the div is toggled.

    Here is Sam’s site in the post:

    http://www.ncdesigns.ca/example.html

    I added some functionality (I think) so you don’t have to create a function for each toggle image set.

    Here is the JavaScript Code (Please, I am no JS Expert, so comments or changes are welcome).

    /* Image Swap Collapsed Position */

    intImage = 2;

    intImageRev = 1;

    function swapImage(x) {

    switch(intImage) {

    case 1:

    x.src = “images/icons/arrow_to_right.png”

    intImage = 2

    return(false);

    case 2:

    x.src = “images/icons/arrow_to_down.png”

    intImage = 1

    return(false);

    }

    }

    /* Image Swap Expanded Position */

    function swapImageRev(x) {

    switch(intImageRev) {

    case 1:

    x.src = “images/icons/arrow_to_right.png”

    intImageRev = 2

    return(false);

    case 2:

    x.src = “images/icons/arrow_to_down.png”

    intImageRev = 1

    return(false);

    }

    }

    How to call in the HTML

    Some displayed text

    Some hidden text

    You also need to include the motionpack.js script for the toggle function.

    –Phill

  208. Phill Pafford Says:

    Ooops, HTML Tags are allowed in the post, sry.

    (a) href=”javascript:;” onmousedown=”swapImageRev(getElementById(‘img1′)); toggleSlide(‘mydiv’);”

    (img id=”img1″ name=”img1″ src=”images/icons/arrow_to_down.png” border=”0″ /)

    New Outage Record /a)

    (div id=”mydiv” style=”overflow:hidden; height:310px;”)

    —————————————————————

    (a) href=”javascript:;” onmousedown=”swapImage(getElementById(‘img1′)); toggleSlide(‘mydiv’);”

    (img id=”img1″ name=”img1″ src=”images/icons/arrow_to_right.png” border=”0″ /)

    New Outage Record /a)

    (div id=”mydiv” style=”display:none; overflow:hidden; height:310px;”)

  209. Phill Pafford Says:

    see the full post here

    http://www.webdeveloper.com/forum/showthread.php?&t=188954&is_resolved=1

  210. Alexis Tejeda Says:

    If you get the same height’s for all DIV’s here is the solution:

    function getDynamicHeight(objname)
    {
    endHeightDynamic = document.getElementById(objname).scrollHeight;
    return endHeightDynamic;
    }

    That’s the right function to display the dynamic height, like Paul Vincemike say’s.

  211. Teresa Says:

    Thank you! Thank you! This works perfectly (even in Opera 7) and smoothly! (Another script I tried jerked or quivered every time you moused over it.)

    Special thanks, too, to John Diaz who supplied the code for automatically determining the div height.

    God bless!

  212. Michael Says:

    Hi, thanks for this it seems to be working great.

    For people having problems with dynamic height, read John Diaz’s post, and beware if copying and pasting his post as the quotation marks do not transfer properly hence why some of you might be getting a problem.

    I was wondering if it is nessecary for the DIV to have an ID, can’t it work on a class rather than an ID?

    Lastly from a semantic point of view, is there any way to get this to work without putting the toggle inside an anchor tag?

    Only just I have a problem with links that aren’t links to other pages and are there for fashion purposes, can be a negative from SEO sematic perspectives.

    This is the only thing stopping me from adding to my site :(

  213. Michael Says:

    Update on earlier post.

    You can ignore the bottom half of my earlier post as I have solved this by simply assigning the onmousedown to a SPAN rather than an ANCHOR and it still works as expected.

    Now the only remaining question is can I get it to work on a DIV with a class rather than an ID! I’m not a JS expert but I think I need to change the getelementbyID to make it get and element by a class maybe?

  214. Mohan Says:

    Very neat and it was very useful.

  215. mr blog Says:

    thank it`s so cute

  216. bob Says:

    This is great, it works perfectly in wordpress. Just what I was looking for! Many thanks.

  217. chat Says:

    Sohbet Muhabbet Chat –Thanks You

  218. muhabbet Says:

    Sohbet Muhabbet Chat

  219. sohbet Says:

    Thank You

  220. Joe Says:

    Working great in FF, however in IE7 on slide up it jumps as its getting toward the end of its animation..

    any ideas why this may be happening?

  221. Penis Enlargement Says:

    Well I think you are genius and the post is marvelous.

  222. mcm Says:

    I have the following scenario

    three buttoms (categories), so if you click buttom one the will toggle down.
    what about if you click a second buttom. instead of toggle up and down again will change the info and the will toggle up and down.

    How will you approach that?

    Thanks!

  223. mcm Says:

    have the following scenario

    three buttoms (categories), so if you click buttom one the div will toggle down.
    what about if you click a second buttom. instead of toggle up and down again will change the info and the will toggle up and down.

    How will you approach that?

    Thanks!

  224. Chris Stauffer Says:

    Great tutorials man! I love them because they give me the ability to actually learn what I’m doing, instead of just giving out the code.

    I’ve got a request though, could you include how to make the image (i’m using images instead of text) change once it has “slid”, then change back after it is clicked again to slide back up?

    Thanks!

  225. Jan Caser Says:

    Great script!!, however i have hit a deadend!!, the auto height on div doesn’t work!!, is there any way around this?, currently im using jQuery still there some limitation, i would like to use this script!!, just like i said im on a deadend!!

  226. Acomplia Says:

    Acomplia represents one of the latest and indeed a most novel method for controlling body weight. Acomplia operates by being a cannabinoid receptor antagonist. This means that Acomplia prevents the normal action of endogenous cannabinoid in the brain from stimulating the so-called CB1 receptors. It would appear that these receptors stimulate appetite and therefore when they are “subdued” so is the need to eat.

  227. Tom Thorley Says:

    Your tutorials are great, they really helped me. One question tho.
    Im looking for something like this, as it has full editing capabilities so i can make my div and the part where you click to open the div look exactly how i want. BUT BUT BUT!!!

    I want to be able to have multiple links, e,g, —–

    About me – - – - – - -
    Text in the drop down div.
    About You————
    Text in the drop down div.

    Only, when you click About me and the text appears, then you click “About You” and the “About Me” text slides back up and the About You text slides down.

    How would this be done?

  228. Tom Thorley Says:

    No Worries

    I figured it out, i just added the slide up function into the A LINK aswell as the toggle for the next div, called each div – div and div2 and it worked :)

  229. Tom Thorley Says:

    My code

    “”“”

  230. Tom Thorley Says:

    <!– –!>

    My mistake, didnt comment the code out!

  231. Tom Thorley Says:

    haha, still dint work!

    My bad im a newbie!

    <!– –>

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

  233. Aldo Mendoza Says:

    First of all, Thanks a TON Harry! Nerdly as well for your interesting adaptation, and the rest of you guys who’s contributed to this stimulating discussion.

    This series of explanations regarding expandable div functions is the most comprehensive I’ve seen online (after much searching too). There are a few similar scripts available out there that are ready to use and tweak, but none that actually explain it as is found here.

    While I can get Harry’s samples to work easily, I have been trying but failing to use these functions more simultaniously. That is, to click ONE link that toggles two or more divs at the same time. I’ve been able to make this happen with scripts that include separate Show and Hide links, but none that work on a one-click toggle basis. After digesting the details on this script’s process order, i’m starting to think it’s not possible. At least not without a more complex programming method. I’m no java buff though, so I’ll ask….

    Is there a way to toggle multiple divs simultanioulsy with one click (as opposed to creating individually linked show/hide groups)?

    Any information or direction would be appreciated ;) Thanks in advance guys.

  234. Marc Johnson Says:

    Have you tried onmousedown=”toggleSlide(‘mydiv’); toggleSlide(‘mydiv2′);” for the multiple ones. I know it seems kind of obvious…..Ok, I just tested it on my website and it works. One button toggles several at the same time. If this was helpful go to http://thewebdesignblog.net/archives/22 where I modified this script to make it better :D

  235. jck Says:

    how do i make it change text when it is clicked(and change back when clicked again)

  236. pieriagma Says:

    cheap tickets for sopranosvegas

  237. teataptignaboog Says:

    hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.
    nutgsmkhmssmchsrubjdtksaouybpmqyftdhello

  238. dakweaslexslowl Says:

    hcqigofbcbmpzozqwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)

  239. Ritesh Patel Says:

    Is this section 508 compliant? i.e. does screen readers pickup hidden div?

    Thank you.

  240. teataptignaboog Says:

    hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.
    yfdtnlqagzgbxemewfuzewxlqhymqhkrfephello

  241. Hemant Says:

    Hi,
    Its a great script. Thanks Harry for such a wonderful script. Though I am facing a problem with IE, before sliding up, the div flashes for a split second, I went through comments and saw someone else too pointing out the same, but then there was no reply. Could anyone help please?

    Thanks,
    Hemant

  242. Javascript get height - DesignersTalk Says:

    [...] redefine the height. Brambling Design | What We Do The script I’m using is Motionpack.js from here The script defines the height by what’s specified in the stylesheet, which means It cant be [...]

  243. seoelite Says:

    Thank you. I read herelots of valuable sentences. Greetings from Poland.

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

  245. Z Says:

    Is there any chance for it to slide down page scroll to div’s bottom line if the div after toggling goes under view?

    It should have something to do with window.scrollTo but Im not exactly sure how to detect if the div is under page view.

  246. Mekhi Stevenson Says:

    Chris Brown is a good person he does not have a history of violence..cant wait til this is over and he is with a new love.

  247. Y2A Says:

    wow.. great work.. thanks a lot!

  248. http://www.scriptremix.com/ Says:

    One Click Toggle for Sliding, Animated DIV…

    I’ve 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 that repeated kept coming up was how to toggle the sliding wit…

  249. joe Says:

    hi harry,
    im having a problem with this script on safari, if the function slidingdiv is included in a window.onload event, the timeout of the sliding dont happened and this only on safari, any thoughts? regards.

  250. Sam Says:

    Very nice slide effect !!!!!!!

    Just a idea, It would have been cool to also add a change to the “Toggle DIV Slide” link so that it changes text between “Slide Down” and “Slide Up” when you click it.

    Keep up the good work enjoyed this tutorial a lot as a beginner to javascript.

  251. Sean Says:

    Anyone notice that you can’t apply a class to the div to scroll?

    You must use: style=”display:none; overflow: hidden; height: 50px;border-top: solid 2px #EEE”

    and cannot use regular class application like so:
    .cdiv {display:none; overflow: hidden; height: 50px;border-top: solid 2px #EEE;}

    class=”cdiv”

    The script causes the browser to freak out, though I’m not sure why…

  252. Javascript - Changing text in a Div | Global Hosting Talk Says:

    [...] Javascript – Changing text in a Div Filed under: Web Hosting Talk — admin @ 4:33 pm I’m using Harry Maugans’ Script [...]

  253. dylan Says:

    wonderful work, and clean

  254. bebart Says:

    First of all awesome code…this has helped a lot.

    I am trying to do what nerdly was talking about earlier on…

    “…would it be possible to click on a 2nd link, and it would minimize the last one licked (or say all of them, for coding ease) and then slide open the new one?”

    I have tried all of the links posted about this but they are all dead now :(

    Anyone know more specifically how to use the loop to achieve this?

  255. Ed Says:

    Just wanted to say a massive thanks for a brilliant tutorial!

  256. Omar Says:

    Hi,

    This is a wonderful script and good job on making it! I have something that is puzzling me a bit. I am try to add a form to be toggled on click, instead of text. There is a short code, [tdomf1], but when pasted, it appears as text. I want to show the form instead. How can we fix this?

    Thanks!

  257. Emmanuel Says:

    I’ve got a bad problem with IE…
    When I expand it only expands about 1 pixel…
    Even though I’ve pasted exactly the same as the code you have in this tutorial. With the height specified etc….
    FF and Chrome are fine. only IE refuses to expand.
    Cheers
    Emmanuel

  258. web design sussex Says:

    The web design Sussex Website was professional website designing used for the customers as well as even associations in web site.

  259. Joseph Says:

    Incredibly useful! Very well explained!!

  260. Kodes Says:

    Question (or idea), say your using it in a FAQ section, would it be possible to click on a 2nd link, and it would minimize the last one licked (or say all of them, for coding ease) and then slide open the new one?

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

  262. Kodes Says:

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

  263. Saikrishna Says:

    great work
    it work fine…
    thanku

  264. Jarryd Says:

    Hi Harry

    Thank you for this. I spent a few frustrated hours searching for something like this, yet I couldn’t think of the keywords to use.

    I do have one problem though: When I used the original code to just do a basic show/hide of the DIV, it worked fine, however as soon as I introduced the code for the sliding DIV, it stopped working. When I look at my error console, it tells me “toggleSlide is not define”, however I haven’t changed anything in the .js file – I’ve copied the code exactly as you have it above!

    If you have any suggestions as to what is causing this, I would really appreciate the help. I’m using it for an enrollment form for a client’s website, and I want to add the functionality to add extra names, without having 50 “Name” fields sitting there – if they need to add another name, they just click “Click to Add” or some such, and a new line appears.

  265. Travel Says:

    Just what ive been looking for…

  266. Matt K Says:

    Hey Harry, great tutorial!! To take it one step further can you demonstrate how to swap an image while toggling up and down. For an example say an arrow that shifts from pointing right while collapsed to pointing down while expanded? That would be great! Thanks again.

  267. Brent Emmerich Says:

    Has anyone tried to build this so that the slidedown opens the div and then set the slideup on a timer? This way when you click the open button the div automatically closes.

  268. Mayra Says:

    Thanks for making this simple tutorial. I’ve been looking for simple explanation on how to accomplish “sliding divs” and this was the easy step-by-step instructions I found.

    Thanks again for not making it too complicated!

  269. Wil Craig Says:

    I just wrote a code to do a variable height 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);
    }
    }

  270. bilayy Says:

    AMAZING!! WOW I cannot believe this! Thanks alot!

  271. Jessie Says:

    Hi, could I’m trying to make it so that when I click the link it brings down the panel and when I click it again it collapses, can somebody tell me how to do this please?

    Thanks.

  272. chat sitesi 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!

  273. Dave Says:

    I’m checking this code in latest version of Mozilla v 3.5.8 – and the toggle link opens the additional content – but when you click on it again – it doesn’t close it. Anyone else having that problem? And if so, any fixes for this?

  274. Judith Says:

    Cheers for this.

  275. Alex Says:

    @ Wil Craig this method dont work for me, slide stop scrolling when i change file, if anyone have solution how to have slider with variable height div (specially for height:100%) it would be great. i want to use slider option in comments.

  276. TJ Says:

    I know this question has been asked before but I scrolled through all the comments and couldn’t find an answer. Is there a way to either scroll the page down or push the contents of the page up as a div expands? My divs will expand off the page causing the user to have to scroll down to see the contents. Not that huge of a deal but something I would like to implement. If you need an example: http://www.tjdphoto.com is my site.

  277. Fred Says:

    Hi,

    First of all, thanks for this tutorial, it’s a great one!

    Everything works fine, but i would like to have a function toggleSlide that closes all the open slides when the user opens another one.

    i saw the question appear in the comments, but didn’t find a actual solution.

    Can someone help me with this plz? (i’m not experienced in javascript :-s )

    Thanks in advance!