using display or visibility to implement tabs

[Summercool]

it seems that we can actually use "display" or "visibility" to
implement tabs. i just wonder if there are pros and cons?

it seems that if we use "display", the browser may need to shrink the
1st tab first, and then redisplay the second and re-flow the things on
the screen, thus causing a time delay.

with visibility, there probably is not such delay...

so is this how you make the big tabs content div's:

<div id="tab1" style="height: 800px">
content 1
</div>

<div id="tab2" style="positive: relative; top: -800px">
content 2
</div>

tab3, tab4 the same way as tab2...

and then just use javascript to toggle the visibility.

thanks.

[Ben C]

On 2007-10-26, Summercool <Su************@gmail.comwrote:

>
it seems that we can actually use "display" or "visibility" to
implement tabs. i just wonder if there are pros and cons?

it seems that if we use "display", the browser may need to shrink the
1st tab first, and then redisplay the second and re-flow the things on
the screen, thus causing a time delay.

That sounds about right.

with visibility, there probably is not such delay...

Exactly, a visibility change will never move anything on the screen so
the browser can avoid a reflow.

so is this how you make the big tabs content div's:

<div id="tab1" style="height: 800px">
content 1
</div>

<div id="tab2" style="positive: relative; top: -800px">
content 2
</div>

tab3, tab4 the same way as tab2...

and then just use javascript to toggle the visibility.

Something broadly along those lines should be fine. Of course there's
no such property as positive: relative.