CSS Visibility & Display to make [+] & [-] drop down

[madproject.com]

Here's the low down, I want to have a text link that says

[+] Details

When you click on it, the hidden layers will appear with details
and [+] Details
will become
[-] Details

The hidden layer that appears once you press on the plus must take up space, the space must not already be reserved. Meaning, when I click on [+] Details the hidden details should just push down anything and make it's space.

Just like an XML sheet.

Thanks!

[madproject.com]

All this without having to reload the page.

[Travis]

That would require javascript.

[Winged Spider]

Depends.

If your have a good idea of where exactly where the content will be, as in fixed, you could use a easy script like this: http://www.dyn-web.com/dhtml/show-hide/

If your page is fluid and those details will be all over the place it will be a lot harder to get the show-hide layer support to work correctly.

[dotDan]

Hm. Normally I would use Javascript for this, but if you take the code on meyerweb.com/eric/css/edge and change it from :hover to :active.. I'll have to try that. It's Mozilla-only, though..

[redux]

slightly off topic, but: stumbled across this the other day http://devedge.netscape.com/toolbox/...03/CTOCWidget/

[wild boar]

I think dhtmlcentral.com has this script

[mcg_sg]

I suddenly thought of utilizing

{ height:1em }
and
{ overflow:hidden }

plus negative atrocious padding/margin to hide and redisplay stuff...

[Count Chocula]

Project VII has a good tutorial on how to make this type of navigation. The tutorial includes a Dreamweaver extension and tutorial files.

http://www.projectseven.com/tutorial...lass/index.htm