Using Script.aculo.us to Toggle a DIV

Posted by jay on December 14, 2006 under AJAX |

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:

Try Me

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

Try Me

Can You See Me Now?

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:

View the Code

piotr said,

is it possible to add cookies here so that when you slide in somethng it stays there even when you refresh the website?

piotr
jay said,

How's this for ya: Using Script.aculo.us to Toggle a DIV II.
Kersten said,

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
susan said,

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.
Access Cheap said,

I was just wondering if you are using this for this blog.
Jay said,

Currently I am only using it in this post and at labs.gotfoo.org to toggle the project details.
Fluffy said,

Might you have any tips on getting this to work for three different div's, where toggling one closes the others?
Fluffy said,

Figured it out.. when activating test_div1 you just have to include onclick="Element.hide('other div');
Element.hide('another div');" in the link.
Sizzler said,

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?
Jesse C. said,

I'm a complete js idiot - and this made sense to me. Thank you, thank you, thank you!
Alex Stanhope said,

That's absolutely awesome! Simple...but very effective! Thanks for posting a great tute
ujjujxobyz said,

Hello! Good Site! Thanks you! pmhungugrrze
Sebastian said,

I would like to integrate this persistance. Where do i have to add your code? In header or the js-files??
Francis said,

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.
divide said,

Very nice tutorial. I was looking for some examples of the mouseover effect.
Jay said,

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,
Ray said,

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
somu said,

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.