[Webinar] Streamline your web hosting managementRegister Today


text swap

Posted on 2008-01-31
Medium Priority
Last Modified: 2013-11-19

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.
Question by:jackie777
  • 5
  • 2
LVL 41

Expert Comment

ID: 20793636
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
LVL 41

Expert Comment

ID: 20793685
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


Author Comment

ID: 20793822

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.
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

LVL 41

Expert Comment

ID: 20793849
Change the style attribute to:

LVL 41

Accepted Solution

HonorGod earned 2000 total points
ID: 20793852
So, instead of:

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

You would have:

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

Author Closing Comment

ID: 31427001
Perfect, Thanks.
LVL 41

Expert Comment

ID: 20793934
Great.  It's always good to be able to help.

Thanks for the grade, and the points.

Good luck, and have a great day.

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question