How to show/hide classes using CSS and or javascript?

[quushich]

I want to be able to stop a paragraph mid-sentence and provide a 'more' link that then disappears when clicked and the rest of the paragraph appears in place. Much like many blogs and social sites do.

Below is code from just such a site... so what is needed to make it work?

<div id="story" class="text_exposed_root">Yay for being around yada

<span class="text_exposed_hide">...</span>

<span class="text_exposed_show"> yada on Sunday!</span>

<span class="text_exposed_hide">
<span class="text_exposed_link">
<a onclick="CSS.addClass($("story"), "text_exposed");">read more</a>
</span>
</span>
</div>

Thanks for any help.

[drhowarddrfine]

Obviously, with the 'onclick' attribute, you need javascript and you should ask this question on that board.

Actually, something can be done without js by assigning CSS to the anchor's ':visited' property but that can be unreliable and only works on one click.