This is a nice little trick that I am constantly going back to Script.aculo.us to look up. This Hides/Shows (Toggles) a DIV (or any element) with the click of a link using the Script.aculo.us Effect.toggle('ELEMENT','EFFECT') function. Script.aculo.us has 16+ Combination Effects but only a few can be used with Toggle.
*update - I have created a second version that adds persistence to the div here.*
Most of the demos of the Toggle effect start with a HTML Element that is already visible like this:
You Can See Me Now?
As you can see the DIV was visible and clicking like hides it.
But what if you have some content that you want to be hidden and then make it visible upon a click (or any other OnEvent for that matter)?
Pretty cool huh?
So what the difference?
The key item to point out is the style='display:none;' in the DIV. By specifying this in the DIV it's initial state will be hidden and upon an Event that triggers Effect.toggle the DIV will be come visible. And it you do not place the style in a DIV it's initial sate will be visible.
The Toggle effect works with:
Toggle can even be used with OnMouseOver:
Comments
is it possible to add cookies here so that when you slide in somethng it stays there even when you refresh the website?
piotr
How's this for ya: Using Script.aculo.us to Toggle a DIV II.
Is there a possibility to get a nested toggle effect, with 2 or more nested div elements? Like when I clik on a parent div a first child div appears and clicking on that invokes a child div of the child div...and so on.
Any ideas? Thanks...
Kersten
I am using scriptaculous and body onLoad with duration to slide down and then up over a period of 11 seconds. How would I go about setting a cookie that allows this to only happen once per day? I also have a toggle effect that uses appear to become available after the slideDown/Up have completed that enables a user to toggle slide manually.
I was just wondering if you are using this for this blog.
Currently I am only using it in this post and at labs.gotfoo.org to toggle the project details.
Might you have any tips on getting this to work for three different div's, where toggling one closes the others?
Figured it out.. when activating test_div1 you just have to include onclick="Element.hide('other div');
Element.hide('another div');" in the link.
I have a problem, where I have created some drop down menus, but if I move the mouse quickly over multiple buttons, the mouseOut event doesnt trigger so that some of the menus are left open still.
Does anyone have a good idea on how to get around this?
I'm a complete js idiot - and this made sense to me. Thank you, thank you, thank you!
That's absolutely awesome! Simple...but very effective! Thanks for posting a great tute 
Hello! Good Site! Thanks you! pmhungugrrze
I would like to integrate this persistance. Where do i have to add your code? In header or the js-files??
can you integrate this to a rollover image instead of using a text link? I am having trouble integrating this with dreamweaver's generated image rollover effect.
Very nice tutorial. I was looking for some examples of the mouseover effect.
could this be tweaked to control a row of thumbnails, that on rollover (onmouseover) it would switch a main image above it? we've got a product that has one main image on the page, and 5-10 thumbs of diff. colors. we'd like to rollover the thumb for blue, and have the main image switch to the blue variant. roll on red, image switches to red, etc... using lightbox, and would be good to integrate with that, and keep using script.aculo.us. thanks,
Nice tutorial. I have problem, for example i use 2 link for "Mouse Over: Slide", called link A and Link B, then.. how to make part of Link A hide when the mouse over on Link B, and open part of Link B.
thanks
I have problem, for example i use 2 link for "Mouse Over: Slide", called link A and Link B, then.. how to make part of Link A hide when the mouse over on Link B, and open part of Link B.
Hi, cool effect.
But is there any mod to add sound to the effect when it slides downM
Very nice. You've encouraged me to try harder. I'm working on a dropdown menu..Ugh...but it is turning out pretty nice. One thing I notice is that if you use an image for the submenu it gets a little buggy. Anyone else notice that?
Dude! You saved me hours of trying to set an initial "invisible" state of that DIV! Thanks a bunch!!
Thank you. This was such great help! 