jackie777
asked on
text swap
Hi
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.
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.
Something like this perhaps.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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';
}
</script>
</head>
<body>
<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>
<div name='data' style='display:none' id='D2'>
The quick brown fox jumped over the lazy dog.
</div>
</body>
</html>
ASKER
Thanks,
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.
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.
Change the style attribute to:
style='display:block'
style='display:block'
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Perfect, Thanks.
Great. It's always good to be able to help.
Thanks for the grade, and the points.
Good luck, and have a great day.
Thanks for the grade, and the points.
Good luck, and have a great day.
one moment please