Dispay "dynamic" text and CSS link problem

I want to display some text when a user clicks my menu selections.
Table 1 = The menu
Table 2 = where the text is to be displayed.

Inside Table 2 I have e.g: (the text is hidden by default)
<div id="someText1" style="display:none;"> This is the text. Lots of text </div>


Inside Table 1 I have
<a href=# onMouseDown="show('someText1'); return true;"> Menu Item 1 </a>

This works with the follwing script:
function flip(foo) {
//document.getElementById(foo).style.visibility="hidden";
if( document.getElementById(foo).style.display == "none") {
document.getElementById(foo).style.display="block";
} else {
document.getElementById(foo).style.display="none";
}
}
function show(foo) {
document.getElementById(foo).style.display="block";
return true;
}
function hide(foo) {
document.getElementById(foo).style.display="none";
return true;
}
===========================================
*Now*, I have 5 menu items, and a lot of text is to be displayed for each of them. I want to avoid having a mile long webpage (in code that is) and I want to try not to create 5 different html pages.

Is there a way where I can retrieve the text from somewhere and display it to the user WITHOUT reloading the page????
I tried using variables and document.write function.... kind of worked, but then only the text was displayed, and nothing else of the page (new page with text).
How can I solve this??
**********************************************
CSS PROBLEM.

This works. (External file)

.MenuText
{
color: #4488E9;
font-size: 75%;
font-weight: bold;
text-decoration: none
}
a:link { text-decoration: none; color: #4488E9 }
a:hover { color: #1329D0; font-weight: bold }

This doesn't work.

a.MenuText:link { text-decoration: none; color: #4488E9 }
a.MenuText:hover { color: #1329D0; font-weight: bold }

Comments?
***************************************

Hope I explained myself good enough. Any suggestions appreciated!

Steven

Hi spstieng,

Just to be confusing I'm gonna answer (or try to) these backwards.

CSS - Problem

Right, your CSS DOES work but only if you are really specific about where you specify the class. This style will only work if applied directly to the <a> element of your code i.e.:

<a href="#" class="MenuText">Testing 123</a>

Apllying the class to a P element or anything like that won't work as you are specifically targetting an <a> parent (CSS inheritency - aka a brain freeze waiting to happen!)

If you want to apply the style to all links contained within a body of text with the menu text class you need to rearrange your css:

.MenuText a:link { text-decoration: none; color: #4488E9; }
.MenuText a:hover { color: #1329D0; font-weight: bold; }

This will mean any links within the text with the class MenuText will have your style applied.

It's also worth warning you (although you probably know this) that there is something of a gotcha involved in using CSS pseudo classes. You have to make sure they are in the right order. In this example you are probably ok but for a more complex style (with visited and active styles) you must use the following order in your style sheet:

a:link
a:visited
a:hover
a:active

I hope this makes sense.

As for the second problem:

JavaScript isn't really my strong suit but from the sounds of it you could use an IFrame or layer. these can have a SRC element setting just like an image. That SRC can be a HTML doc residing on your server. You will need to experiment with the code to get it to work in all browsers (if you are targeting anything less than NN4 then forget it!) but this should work without too much hassle. I frames are for IE and NN 6+ whilst you need to use LAYER or ILAYER for NN4.

I can't really think of an alternative that doesn't involve a refresh. But to be honest with you, text data is relatively small so provided you code your divs at the bottom of your page (to allow more relevant content to load first) then you will notice a very small performance hit. Most dial up users can download the entire works of Shakespeare in just over 60 seconds so I don't think a few menu options are going to cause them too much trouble :-)

I hope this is helpful.

Icy

Thanks Icy, that helped my CSS problem (and no, I didn't know the ordering mattered!)

Still the javascript. The reason is that the code will be VERY long and difficult to maintain.

Do you (or anyone else) know if I can show and hide contents of a variable?
E.g. var txt1 = 'some text';

And then call the show function with the variable name? -> show(txt1).

If that is possible, I'll just chuck my text in an external *.js file and just link it in my main document.

Steven

right with you (sorry i can be a bit slow on the uptake sometimes!)

As I said I'm no Javascript expert but I do know that you can set the inner HTML of a Span tag dynamically. Unfortunately I seem to have lost the example i had of this. Other than that I'm afraid I will have to let someone else sort this one out before my lame JScript knowledge embaresses me in front of the entire forum.

Icy

Yea, u're a real lamer Ice

Nah! Thanks so much for your help.
I'm diching Javascript - never liked it anyway. I'll practive my PHP skills instead

Steven

In case you haven't completely given up on the idea, there is some very simple code for changing content at http://www.dyn-web.com/dhtml/lyr-cnt/innerhtml.html . More writing to layers examples at http://www.dyn-web.com/dhtml/write-lyrs.html