Partial Expand/ Collapse, using text as the bottom.

So, I’m trying to create a top menu for my website. I think a picture will help me to explain better:

[url]http://img193.imageshack.us/img193/5691/examplenormalcopy.jpg[/url]
[url]http://img804.imageshack.us/img804/1156/exampleexpanded.jpg[/url]

So, as you can see the links represent my menu. Normally it would be “compressed”. If you hover over the grey area, I want…
-a border to appear around the grey area (I think I’ll just use a sprite background)
-text to display “click to expand” (I think I can do this)
-I want hover events within the grey area to still happen, but clicking them would not “click the link”, but would just expand the area. Like clicking anywhere else in the grey area would.

Once clicked, the menu expands, and now the links can be clicked.

I have read this thread:
[url]http://www.webdeveloper.com/forum/showthread.php?t=77389&page=6[/url]
So I know how to make it “expand and collapse”, but only with a button. How can I make this happen by clicking on the text itself? How can I prevent the click to “click the link” if it is still compressed?

Any suggestions?

Thanks!

Also in #JavaScript _↴