text swap


I'm looking for a way to make a series of links link swap text. I assume this could work similarly to an image swap but I can seem to figure out how to get it. For example, I have a list of text links on the left side of the page and when the user clicks on each one a new paragraph is supposed to show up on the right side of the page. The default paragraph on the page would be the one associated with the first link. Could I do this using pure CSS or do i need to use Javascript because I need the onclick command? It would be great if anyone out there could give me some example code for this.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HonorGodSoftware EngineerCommented:
One way to do it would be for each link to "Hide" the currently visible "Div", and "Show" the hidden Div associated with the link.  Does that make sense?

one moment please
HonorGodSoftware EngineerCommented:
Something like this perhaps.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title> show/hide text </title>
<script type='text/javascript'>
  function field( id ) {
    var obj = document.getElementById( id );
    if ( !obj ) {
      alert( 'Document element not found.  id=' + id );
    return obj;
  function show( id ) {
    var all = document.getElementsByName( 'data' );
    for ( var i = 0; i < all.length; i++ ) {
      all[ i ].style.display = 'none';
    field( id ).style.display = 'block';
<a href='#' onclick='show("D1")'>Section 1</a><br>
<a href='#' onclick='show("D2")'>Section 2</a><br>
<div name='data' style='display:none' id='D1'>
Now is the time for all good men to come to the aid of their country.
<div name='data' style='display:none' id='D2'>
The quick brown fox jumped over the lazy dog.

Open in new window

jackie777Author Commented:

That is exactly what I was looking for, however, how would I make section1 appear to start. So when the page first opens is would say "Now is the time for all good men to come to the aid of their country." Then when you click on the links it would change.
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

HonorGodSoftware EngineerCommented:
Change the style attribute to:

HonorGodSoftware EngineerCommented:
So, instead of:

<div name='data' style='display:none' id='D1'>

You would have:

<div name='data' style='display:block' id='D1'>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jackie777Author Commented:
Perfect, Thanks.
HonorGodSoftware EngineerCommented:
Great.  It's always good to be able to help.

Thanks for the grade, and the points.

Good luck, and have a great day.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.