Visibility:Collapse 2

[rjoubert]

I have a DIV element on my webpage that I would like to collapse and expand depending on different links that the user clicks. I started out by setting the DIV element's style="visibility:collapse", but that didn't hide the contents of the DIV. I then tried style="visibility:hidden", which hides the contents, but leaves the blank space occupied by the content. After a bit of googling, I tried replacing the DIVs with table structures, but that didn't work either.

What exactly is "visibility:collapse" supposed to do? Should I be using it with something other than a DIV or table?

 

[BabyJeffy]

I would suggest you investigate display:none and the other values for the display property (block, inline). They will do what you want.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[johnwm]

If I want a DIV hidden I use:
{display: none;}
and to reappear:
{display: block;}

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[johnwm]

Sorry Jeff - slow typist at work

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[Vragabond]

What exactly is "visibility:collapse" supposed to do?

The 'visibility' property takes the value 'collapse' for row, row group, column, and column group elements. This value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content. The suppression of the row or column, however, does not otherwise affect the layout of the table. This allows dynamic effects to remove table rows or columns without forcing a re-layout of the table in order to account for the potential change in column constraints.

More here:

http://www.w3.org/TR/REC-CSS2/tables.html#dynamic-effects

 

[rjoubert]

Thanks Jeff and John, that worked great.