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 PROTECTED] http://www.objectevolution.com ______________________________________________________________________ css-discuss [EMAIL PROTECTED] 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/
