Making HTML sections not visible

[nrivera.eng]

How can I make multiple blocks of HTML not visible in the page unless
explicitly referenced by a user selection of a hyperlink to the block
within the same document? For example if I have a table, a list and an
image that I only want to be visible if the user selects the hyperlinl
to the block reference.

Thanks
Noel

 

[C A Upsdell]

How can I make multiple blocks of HTML not visible in the page unless
explicitly referenced by a user selection of a hyperlink to the block
within the same document? For example if I have a table, a list and an
image that I only want to be visible if the user selects the hyperlinl
to the block reference.

Put the invisible stuff in a block (or blocks) with the CSS
display:none, then use JavaScript to change the block(s) to display:block.

Or put the block(s) in a positioned block with the left position set to
a large negative number, and likewise use JavaScript to change the
position to the desired positive value.

Or put the block with a z-index which is covered with blocks with a
higher z-index, then use JavaScript to change the block's z-index to
appear above all the others.

Lots of solutions.

 

[nrivera.eng]

Put the invisible stuff in a block (or blocks) with the CSS
display:none, then use JavaScript to change the block(s) to display:block.

Or put the block(s) in a positioned block with the left position set to
a large negative number, and likewise use JavaScript to change the
position to the desired positive value.

Or put the block with a z-index which is covered with blocks with a
higher z-index, then use JavaScript to change the block's z-index to
appear above all the others.

Lots of solutions.

Can it be done without the use of JavaScript?

 

[C A Upsdell]

Can it be done without the use of JavaScript?

If instead of clicking on a link, the user can simply hover over an
object, this can be done by CSS alone EXCEPT for IE5 and IE6, which
still would require some JavaScript.

 

[nrivera.eng]

If instead of clicking on a link, the user can simply hover over an
object, this can be done by CSS alone EXCEPT for IE5 and IE6, which
still would require some JavaScript.

Thanks a lot!

 

[Toby A Inkster]

Put the invisible stuff in a block (or blocks) with the CSS
display:none, then use JavaScript to change the block(s) to
display:block.

That is not a good way of doing things. Try instead putting them in blocks
with CSS display:block, then toggling that to display:none on page load,
and then back to display:block upon the desired user action.

The reason for this becomes obvious when you consider the outcomes for
people using CSS-compliant, but non-JS browsers.

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 20 days, 17:32.]

Bottled Water
http://tobyinkster.co.uk/blog/2008/02/18/bottled-water/

 

[C A Upsdell]

That is not a good way of doing things. Try instead putting them in blocks
with CSS display:block, then toggling that to display:none on page load,
and then back to display:block upon the desired user action.

The reason for this becomes obvious when you consider the outcomes for
people using CSS-compliant, but non-JS browsers.

I did suggest a CSS solution to the OP, but JS would still be required
for IE5 and IE6, and the design would have to use a hover event, not a
click link event, as the OP wanted, to switch the block on.

As for your suggestion, the problem is that the OP wanted the user
action to be clicking a link, and this cannot be achieved using CSS alone.

 

[Toby A Inkster]

I did suggest a CSS solution to the OP, but JS would still be required
for IE5 and IE6, and the design would have to use a hover event, not a
click link event, as the OP wanted, to switch the block on.

As for your suggestion, the problem is that the OP wanted the user
action to be clicking a link, and this cannot be achieved using CSS
alone.

I never said not to use Javascript -- just that the default CSS for the
hidden items should be display:block.

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 20 days, 22:24.]

Bottled Water
http://tobyinkster.co.uk/blog/2008/02/18/bottled-water/

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Tue, 19 Feb 2008 13:54:21
GMT C A Upsdell scribed:

I did suggest a CSS solution to the OP, but JS would still be required
for IE5 and IE6, and the design would have to use a hover event, not a
click link event, as the OP wanted, to switch the block on.

As for your suggestion, the problem is that the OP wanted the user
action to be clicking a link, and this cannot be achieved using CSS
alone.

Toby's right for a change. Op can use css to display:block;, then use j/s
to display:none;, then use j/s pertinently in the link(s) to display what
he wants displayed from there.