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