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