Previous Message
Next Message

Best Way to Show/Hide Text

Sent by Jon Wynacht on 14 March 2006 18:06


Wow, I thought you were kidding about that demo. Great! That pretty  
much explains what I'm looking to do and educates me with regards to  
degrading with no JavaScript.

I appreciate the help here and will be more conscious about keeping  
JS out of the question ;-)

Cheer and thanks,

Jon

On Mar 14, 2006, at 10:09 AM, Christian Heilmann wrote:

>>>> 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/

Jon Wynacht
[EMAIL-REMOVED]
http://www.objectevolution.com


______________________________________________________________________
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: