- 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:
Enjoy! And also, I’m always listening for new ideas for tutorials. If there’s something you’d like me to explain, ask! 
March 24th, 2007 at 11:54 am
[...] Edit: Due to a high number of requests, I’ve made a followup post explaining how to use this code in a one-click toggle situation: Toggle Sliding DIV [...]
March 24th, 2007 at 4:09 pm
Hello
Is it possible to add a hyperlink to a sliding div? That is, after if slides, it also opens something?
March 26th, 2007 at 5:50 pm
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?
March 26th, 2007 at 6:06 pm
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?
March 26th, 2007 at 6:58 pm
Actually it does. Now I just have to get to coding it.. I’m still learning Java of course
March 27th, 2007 at 12:27 pm
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
March 27th, 2007 at 12:27 pm
Woop, comments do not show it right, but needless to say I resolved it, Thanks a TON!
March 28th, 2007 at 8:11 pm
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!
April 2nd, 2007 at 11:10 am
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” ?
April 3rd, 2007 at 2:16 pm
Really a nice explanation. Good job.
April 5th, 2007 at 10:15 am
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!
April 5th, 2007 at 1:48 pm
Nerdly (or anyone else with the solution), could you please share with us how you accomplished this? This is exactly what I am looking to do with one of my current sites.
Thanks!
April 6th, 2007 at 10:26 am
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
April 8th, 2007 at 1:55 pm
Anyone figured out how to do this sideways?
April 9th, 2007 at 12:03 pm
Sorry folks, it wasnt letting me post a url,
(http://www.cavernprojects.com/projects/oneclick/)
Hope that works.
April 11th, 2007 at 5:12 am
Any alternative to invoke accessibility in case the user has java script turned off? They can`t see hidding content.
Thanks, good project.
April 11th, 2007 at 11:22 am
Harry, great work!
Any way I can get it to work with a none fixed div height?
April 13th, 2007 at 6:41 am
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 ?
April 16th, 2007 at 12:11 pm
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
April 19th, 2007 at 10:39 am
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.
April 21st, 2007 at 8:17 pm
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.
April 23rd, 2007 at 7:48 pm
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.
April 24th, 2007 at 5:12 am
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.
April 25th, 2007 at 3:57 pm
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?
April 25th, 2007 at 4:01 pm
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
April 25th, 2007 at 4:11 pm
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.
April 26th, 2007 at 7:11 pm
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.
April 29th, 2007 at 2:22 pm
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..
April 30th, 2007 at 9:56 pm
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
May 2nd, 2007 at 6:28 am
Great script, but do you know why it flashes once just before it totally dissapears in IE? In FF it isn’t flashing btw.
May 10th, 2007 at 8:48 am
Thanks so much for this script, works great and saved me the brain power of figuring it out myself
, much appreciated!
May 11th, 2007 at 11:20 am
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?
May 11th, 2007 at 11:53 am
Thanks alot! This really helped me, excelent script, great guide!
/ Erik from Sweden
May 12th, 2007 at 9:25 pm
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
May 15th, 2007 at 1:36 am
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 !
May 15th, 2007 at 1:38 am
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
May 16th, 2007 at 8:53 am
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
June 1st, 2007 at 4:23 am
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!
June 1st, 2007 at 4:35 am
First off, thanks so much Harry for this amazing script.
However, I tried Olivier Suritz’s suggested method of getting this to work with DIVs if varying heights, but it didn’t work at all when I tried his code!
Are there any other methods we can use to get this to respond to a DIV of any height, without entering it manually? Thanks so much!
June 1st, 2007 at 4:38 am
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!
June 7th, 2007 at 7:03 am
One of the best tutorials out there! Very good job
June 7th, 2007 at 9:47 pm
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.
June 7th, 2007 at 10:01 pm
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.
June 10th, 2007 at 9:51 am
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.
June 10th, 2007 at 4:08 pm
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!!!
June 11th, 2007 at 4:34 pm
[...] 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 [...]
June 11th, 2007 at 9:58 pm
Nice code. What about multiple divs? Show only one div at the time.
June 12th, 2007 at 5:01 pm
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?
June 12th, 2007 at 6:56 pm
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.
June 12th, 2007 at 9:16 pm
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.
June 14th, 2007 at 4:29 am
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.
June 14th, 2007 at 7:16 am
ATTENTION all those that are trying to get Haxan or Olivier Suritz’s methods to work for DIVs with DYNAMIC HEIGHT.
I have just used their excellent rendition’s and the problem for me was the different quotes used in this blog – i.e. if you copy and paste, you must make sure that the single and double quotes are correctly formatted for your server.
Great work Harry – brilliant script. Soon to be in use at http://www.dogscandrive.com!!
June 15th, 2007 at 8:29 pm
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
June 15th, 2007 at 8:33 pm
****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
June 18th, 2007 at 11:39 am
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 ?
June 21st, 2007 at 5:00 am
http://www.dogscandrive.com/musictest/bandtest/test-band/
is a demo of a future new page on my website. it uses the dynamic height div function.
i have put the javascript file at http://www.dogscandrive.com/wp-content/themes/default/js/slider2.txt – hopefully this should show any necessary corrections to the quotes problems that i originally noticed.
Features of my implementation are as follows:
- reduced the time for the slide to 1 (
var slideAniLenon line 2); this is because the div contains form elements which weren’t rendering well; most people can leave that at an appropriate number of milliseconds (150-500); sliding is now instant in my demo.- modified a line in the
startslidefunction to take into account the padding in my sliding div. i have a top & bottom padding of 20px; i hacked away and found that my correct is for 41px; if i had not updated this line, my div keeps growing every time i trigger the slide.endHeight[objname] = parseInt(obj[objname].offsetHeight) - 41;- my comments form submission button returns to the same page with the correct comments div already open; this is done by passing a php variable which you can see in the url.
Hope all that is helpful. Any further questions just ask. you can contact me directly at rcolchester atttttt googlemail dotttt com
July 5th, 2007 at 7:00 am
[...] Harry Maugans » One Click Toggle for Sliding, Animated DIV By Yoda Harry Maugans » One Click Toggle for Sliding, Animated DIV [...]
July 9th, 2007 at 6:08 am
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.
July 12th, 2007 at 1:51 pm
Excellent. Just one concern though — Javascript is 3KB, which is quite a lot!
Thanks anyway.
July 14th, 2007 at 8:28 am
[...] 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, [...]
July 14th, 2007 at 8:39 am
I just translated your tutorial into german. I hope it’s okay for you
July 19th, 2007 at 1:31 pm
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?
July 19th, 2007 at 1:34 pm
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?
July 25th, 2007 at 10:11 am
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!
July 25th, 2007 at 5:39 pm
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!
July 31st, 2007 at 2:23 pm
Hi all,
Just wanted to say (further to my sudden influx of posts earlier in this thread) that your sliding divs are brilliant.
My site (which has been undergoing renovation) is now up and running at http://www.dogscandrive.com. You can see your sliding divs (with dynamic height, sliding up and down etc) in action on any artist’s page [note to all: my sliding is so quick you don't actually notice it - if anyone ever gets it working with form elements - please let me know!!!!!].
Feel free to listen to a couple of tracks and rate them while you’re there! Thanks again.
Cole.
August 24th, 2007 at 2:31 am
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!
August 24th, 2007 at 2:36 am
just looking at what cole said befor me..
Cant you jus use the ‘onclick’ attribute of the button ellement??????
something like this…
Gedit?
August 24th, 2007 at 10:28 pm
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.
August 24th, 2007 at 10:29 pm
Er, by that I meant “script tags”.
August 29th, 2007 at 3:57 pm
This is great — i implementing the sliders on my page to display form by sections and to display error messages
August 29th, 2007 at 3:59 pm
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!!
September 4th, 2007 at 5:44 pm
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
September 4th, 2007 at 8:34 pm
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
September 6th, 2007 at 1:14 pm
This is really gud one.
Thanks
Samir Shah
http://www.eatingout.co.in
September 15th, 2007 at 8:19 am
[...] http://www.harrymaugans.com/2007/03/24/one-click-toggle-for-sliding-animated-div/ [...]
September 16th, 2007 at 3:59 pm
How do you use this with forms? The s not a problem, but buttons don’t work. Anyone got a solution?
September 17th, 2007 at 11:33 am
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
September 24th, 2007 at 10:04 pm
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!
September 26th, 2007 at 6:26 pm
I have this script working on a website, which also includes lightbox…but the lightbox seems to be disabled now. Any fix for this?
September 28th, 2007 at 3:58 pm
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?
October 18th, 2007 at 3:15 am
Hey Harry,
Great stuff. One thing though…can different effects, fade for example, be given instead of slide?
Thanks.
November 11th, 2007 at 3:09 am
Thankyou for this, its brilliant.
Is there any way to have the DIV open as default, rather than closed?
Thanks again
November 14th, 2007 at 9:38 am
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!
November 15th, 2007 at 7:00 am
Awesome tutorial. Simple and easy to understand. Godsent for newbies.. thanks a lot
December 5th, 2007 at 12:16 am
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
December 14th, 2007 at 9:32 am
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
December 14th, 2007 at 9:32 am
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
January 1st, 2008 at 12:32 pm
I have trouble with the sliding DIV. The buttons would not show up.. can you help me with this?
January 1st, 2008 at 12:59 pm
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!!!!
January 3rd, 2008 at 9:37 pm
[...] Sliding, Collapsible DIV [...]
January 9th, 2008 at 3:39 pm
Thanks for giving us a great script with great explanation, Harry.
January 9th, 2008 at 8:07 pm
I Think, İt’s Very Nice…
January 11th, 2008 at 7:05 pm
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
January 16th, 2008 at 1:33 am
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?
February 1st, 2008 at 4:38 pm
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
February 2nd, 2008 at 3:55 pm
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.
February 2nd, 2008 at 4:43 pm
Hey Eddie, thanks alot man I appreciate that
February 11th, 2008 at 8:05 pm
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!
February 11th, 2008 at 9:09 pm
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
February 22nd, 2008 at 9:39 pm
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!
February 26th, 2008 at 9:30 am
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′)
March 9th, 2008 at 5:48 pm
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 ??
March 14th, 2008 at 2:04 am
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?
March 26th, 2008 at 6:32 pm
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!
April 11th, 2008 at 8:55 am
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
April 12th, 2008 at 12:06 am
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
April 12th, 2008 at 1:56 am
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
April 12th, 2008 at 3:48 am
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,
April 12th, 2008 at 3:49 am
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
April 12th, 2008 at 3:49 am
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
April 12th, 2008 at 5:46 am
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
April 12th, 2008 at 5:46 am
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
April 12th, 2008 at 7:47 am
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
April 12th, 2008 at 9:46 am
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
April 12th, 2008 at 12:06 pm
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
April 12th, 2008 at 12:06 pm
necessity of these temporary statutes sufficiently demonstrates first time lesbian kiss the neighbouring countries, the government would have no occasion
April 12th, 2008 at 2:08 pm
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
April 12th, 2008 at 2:08 pm
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
April 12th, 2008 at 4:10 pm
in such countries, therefore, that he generally endeavours to first time lesbian toy retailer. They must generally, too, though there are some exceptions to
April 12th, 2008 at 4:10 pm
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
April 12th, 2008 at 6:05 pm
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,
April 12th, 2008 at 6:05 pm
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
April 12th, 2008 at 7:57 pm
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
April 12th, 2008 at 7:57 pm
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
April 12th, 2008 at 9:58 pm
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
April 12th, 2008 at 11:57 pm
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
April 13th, 2008 at 1:44 am
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
April 13th, 2008 at 3:32 am
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
April 13th, 2008 at 5:28 am
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
April 13th, 2008 at 5:28 am
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
April 13th, 2008 at 7:22 am
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
April 13th, 2008 at 7:22 am
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
April 13th, 2008 at 9:18 am
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
April 13th, 2008 at 9:18 am
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
April 13th, 2008 at 11:43 am
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
April 13th, 2008 at 11:44 am
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
April 13th, 2008 at 1:31 pm
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
April 13th, 2008 at 1:31 pm
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
April 13th, 2008 at 3:30 pm
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
April 13th, 2008 at 3:30 pm
presently perceived she was (what is vernacularly termed) TRAILING lesbians in office kissing January, began to heal and subside under the gentler breathings of
April 13th, 2008 at 5:24 pm
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
April 13th, 2008 at 5:24 pm
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
April 13th, 2008 at 7:19 pm
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
April 13th, 2008 at 7:19 pm
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
April 13th, 2008 at 9:15 pm
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
April 13th, 2008 at 9:15 pm
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
April 13th, 2008 at 11:06 pm
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
April 13th, 2008 at 11:06 pm
stronger among the girls ran about and engaged in active games, but lesbian emo action paying the interest of mortgages John gambles dreadfully, and
April 14th, 2008 at 12:49 am
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
April 14th, 2008 at 12:49 am
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
April 14th, 2008 at 2:40 am
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
April 14th, 2008 at 2:40 am
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
April 14th, 2008 at 4:27 am
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
April 14th, 2008 at 6:05 am
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
April 14th, 2008 at 6:05 am
herself out of her chamber, and go roaming about the house, doing chubby lesbians kiss Brocklehurst, of Brocklehurst Hall, in this county Let your
April 14th, 2008 at 7:56 am
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
April 14th, 2008 at 9:26 am
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
April 14th, 2008 at 9:26 am
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
April 14th, 2008 at 11:08 am
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
April 14th, 2008 at 2:26 pm
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
April 14th, 2008 at 3:45 pm
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
April 14th, 2008 at 5:32 pm
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
April 14th, 2008 at 6:56 pm
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
April 14th, 2008 at 6:57 pm
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
April 14th, 2008 at 8:32 pm
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
April 15th, 2008 at 4:16 pm
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!
April 21st, 2008 at 4:55 am
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
April 21st, 2008 at 4:55 am
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
April 21st, 2008 at 6:47 am
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
April 21st, 2008 at 6:47 am
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
April 21st, 2008 at 8:28 am
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
April 21st, 2008 at 10:24 am
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
April 21st, 2008 at 11:59 am
silence of the dormitory, that my companions were all wrapt in airline compass vouch for its contents being original but dont pass your word
April 21st, 2008 at 11:59 am
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
April 21st, 2008 at 1:41 pm
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
April 21st, 2008 at 1:41 pm
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
April 21st, 2008 at 3:25 pm
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
April 21st, 2008 at 3:25 pm
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
April 21st, 2008 at 5:01 pm
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
April 21st, 2008 at 5:01 pm
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
April 21st, 2008 at 6:29 pm
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
April 21st, 2008 at 6:29 pm
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
April 22nd, 2008 at 12:22 pm
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
April 30th, 2008 at 5:50 pm
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…
May 9th, 2008 at 9:36 pm
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
May 16th, 2008 at 8:54 pm
thanks my lord
^_^
I see That
May 17th, 2008 at 9:53 pm
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
May 31st, 2008 at 1:47 pm
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
June 4th, 2008 at 12:51 pm
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?
June 12th, 2008 at 2:10 am
nice tutorial
thanks
June 18th, 2008 at 4:30 pm
Thanks
June 19th, 2008 at 11:18 am
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();
June 21st, 2008 at 9:46 pm
what is with all the spam above? can it be removed? i’m so sick of spammers
June 25th, 2008 at 7:37 pm
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
June 25th, 2008 at 10:19 pm
sorry, there was a flaw,
comment out
——————————-
if(!endHeightDynamic)
——————————-
from -> function getDynamicHeight(objname)
June 30th, 2008 at 10:43 am
Paul Vincemike… You are the man…
and also thanks Jonny 
Thanks harry for this script…
July 3rd, 2008 at 7:36 pm
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?
July 7th, 2008 at 2:07 pm
Please help me with coding a soft js menu
July 14th, 2008 at 1:36 pm
Awsome!…very enlightening
July 23rd, 2008 at 2:50 am
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
July 24th, 2008 at 4:15 am
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..
July 24th, 2008 at 4:27 am
Forget my last post. ive fixed it.
July 27th, 2008 at 10:35 pm
hey i’ve been driving myself crazy i just wanna get that same effect but sliding from bottom to top, any ideas?
August 6th, 2008 at 9:56 am
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….
August 13th, 2008 at 4:49 pm
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?
August 14th, 2008 at 3:52 pm
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
August 14th, 2008 at 3:57 pm
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;”)
August 19th, 2008 at 8:53 am
see the full post here
http://www.webdeveloper.com/forum/showthread.php?&t=188954&is_resolved=1
August 27th, 2008 at 6:06 am
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.
August 30th, 2008 at 5:53 pm
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!
September 7th, 2008 at 10:59 am
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
September 7th, 2008 at 11:50 am
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?
September 8th, 2008 at 7:57 am
Very neat and it was very useful.
September 9th, 2008 at 8:21 am
thank it`s so cute
September 10th, 2008 at 6:08 pm
This is great, it works perfectly in wordpress. Just what I was looking for! Many thanks.
September 16th, 2008 at 2:14 am
Sohbet Muhabbet Chat –Thanks You
September 16th, 2008 at 2:14 am
Sohbet Muhabbet Chat
September 16th, 2008 at 2:14 am
Thank You
September 17th, 2008 at 3:53 pm
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?
September 22nd, 2008 at 10:56 pm
Well I think you are genius and the post is marvelous.
October 1st, 2008 at 4:06 pm
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!
October 1st, 2008 at 4:14 pm
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!
October 7th, 2008 at 9:09 am
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!
October 20th, 2008 at 7:07 am
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!!
October 26th, 2008 at 8:44 am
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.
November 29th, 2008 at 1:01 pm
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?
November 29th, 2008 at 1:07 pm
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
November 29th, 2008 at 1:08 pm
My code
“”“”
November 29th, 2008 at 1:08 pm
<!– –!>
My mistake, didnt comment the code out!
November 29th, 2008 at 1:10 pm
haha, still dint work!
My bad im a newbie!
<!– –>
December 4th, 2008 at 3:17 pm
At http://thewebdesignblog.net/archives/22 this script is modified for the one click slide, plus/minus images and also dynamic height for FireFox and IE!
Basically, it has everything this script should have and works great! Head over there!
December 9th, 2008 at 9:02 am
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.
December 9th, 2008 at 4:29 pm
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
December 19th, 2008 at 12:35 pm
how do i make it change text when it is clicked(and change back when clicked again)
December 26th, 2008 at 4:17 pm
cheap tickets for sopranosvegas
December 27th, 2008 at 6:41 pm
hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.
nutgsmkhmssmchsrubjdtksaouybpmqyftdhello
December 29th, 2008 at 6:56 am
hcqigofbcbmpzozqwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch
December 30th, 2008 at 12:08 pm
Is this section 508 compliant? i.e. does screen readers pickup hidden div?
Thank you.
December 30th, 2008 at 3:50 pm
hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.
yfdtnlqagzgbxemewfuzewxlqhymqhkrfephello
January 19th, 2009 at 9:39 am
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
January 22nd, 2009 at 6:07 pm
[...] 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 [...]
January 29th, 2009 at 11:02 am
Thank you. I read herelots of valuable sentences. Greetings from Poland.
March 18th, 2009 at 5:20 pm
hi! thanks for all the great info. hoping you can help me out quickly.
i’ve been having a heck of a time getting this to work. I’m a total noob and I am trying to do the one-button toggle to reveal an opt-in form.
Its on the middle right under the first opt-in. I can hyperlink the text and click it, but nothing slides.
please help.
thanks in advance for your help.
March 19th, 2009 at 1:13 pm
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.
March 24th, 2009 at 7:56 pm
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.
March 26th, 2009 at 7:51 am
wow.. great work.. thanks a lot!
March 31st, 2009 at 6:59 am
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…
April 9th, 2009 at 8:38 am
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.
April 17th, 2009 at 7:51 am
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.
April 20th, 2009 at 12:31 am
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…
May 12th, 2009 at 12:32 pm
[...] Javascript – Changing text in a Div Filed under: Web Hosting Talk — admin @ 4:33 pm I’m using Harry Maugans’ Script [...]
July 30th, 2009 at 11:24 am
wonderful work, and clean
August 14th, 2009 at 4:27 pm
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?
August 19th, 2009 at 12:59 pm
Just wanted to say a massive thanks for a brilliant tutorial!
August 22nd, 2009 at 6:49 pm
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!
September 9th, 2009 at 2:27 am
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
September 14th, 2009 at 10:50 pm
The web design Sussex Website was professional website designing used for the customers as well as even associations in web site.
September 17th, 2009 at 2:30 am
Incredibly useful! Very well explained!!
October 25th, 2009 at 3:10 pm
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?
October 25th, 2009 at 3:11 pm
Nerdly (or anyone else with the solution), could you please share with us how you accomplished this? This is exactly what I am looking to do with one of my current sites.
Thanks!
October 25th, 2009 at 3:12 pm
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” ?
November 11th, 2009 at 12:49 am
great work
it work fine…
thanku
November 19th, 2009 at 8:46 am
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.
November 25th, 2009 at 2:54 pm
Just what ive been looking for…
December 30th, 2009 at 2:20 pm
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.
January 25th, 2010 at 2:52 pm
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.
February 1st, 2010 at 12:59 am
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!
February 4th, 2010 at 8:18 pm
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);
}
}
February 9th, 2010 at 9:13 pm
AMAZING!! WOW I cannot believe this! Thanks alot!
February 16th, 2010 at 5:28 pm
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.
February 22nd, 2010 at 4:05 pm
Nerdly (or anyone else with the solution), could you please share with us how you accomplished this? This is exactly what I am looking to do with one of my current sites.
Thanks!
February 24th, 2010 at 3:15 pm
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?
May 19th, 2010 at 3:13 am
Cheers for this.
May 21st, 2010 at 11:52 am
@ 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.
June 22nd, 2010 at 11:17 pm
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.
June 27th, 2010 at 9:29 am
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!