Previous Message
Next Message

Best Way to Show/Hide Text

Sent by Christian Heilmann on 14 March 2006 18:06


> >> I'm wondering if there is a definitive way to show/hide text
> >> using JavaScript and CSS. I'm working on a project which
> >> involves a map with various states that are linked. When a
> >> state is clicked content appears which is relevant to that
> >> state. Click another state, the old content is hidden and the
> >> new content appears.

Check the example there:
http://icant.co.uk/sandbox/linkedmap/

I set up the script to allow you to do all the positioning in the CSS.
As you can see the trick is to nest the lot in a relatively positioned
element, then any absolutely positioned element will be positioned
inside that one.

You link all the areas to DIVs with IDs, that way the functionality
also works without JavaScript.

I added a dynamic class when JavaScript is available to allow for
different styles for the non JS and the JS version.

Now, if JS is available you can use this class (here called dynamic)
to hide all sections:

#targetSections.dynamic div{
	position:absolute;
	left:-20000px;
	background:#fff;
	padding:10px;
	border:1px solid #ccc;
	width:300px;
}

And using the ID of the section you position it when the user clicks
the area (this is the bit the JavaScript does):

#targetSections.dynamic #sec1.show{
	top:30px;
	left:200px;
}
#targetSections.dynamic #sec2.show{
	top:130px;
	left:200px;
}
#targetSections.dynamic #sec3.show{
	top:60px;
	left:40px;
}

HTH
Chris

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: