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:
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??
Thanks man, so simple! Been scratching my head over this one for a while. Why is it documented anywhere?!
Is there any standalone JS script that could do this one? I don't need any JS framework because this is the only effect I want.
The "display: none" initial state breaks this functionality completely in Firefox. I'm still trying to work out. Removing "display: none" corrects the problem, but toggled divs then have to be open to start.
Putting "display: none" in a linked stylesheet (rather than inline) makes it worse! It breaks in all browsers. Trying to come up with a solution, and will post it if I find it.