switch out content: replaceWith? or empty + append?
I have looked through the forum and spent five hours (well, seven) today trying to figure out how to put hidden text into a fixed position box but then (this is the hard part) not require the user to toggle, but have another click event replace the text in the fixed position box. My text page works fine if you toggle the fixed box out before clicking again, but if you just click the next link, they line up all on the page together. I've put in and taken out as many different ways to fix this as I could think of, but I'm a fiddler not a coder and I cry uncle. Can you help me? Here's the page in entirety:
=================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
.thebody {background-color: yellow; margin-right: 35px; text-align: left; border: 1px solid black; float: right; padding: 5px 5px 20px 5px; width: 190px;
background-color: white; height: 375px; margin-bottom: 24px; font-size: .7em; line-height: 1.3em; overflow: auto; color: red;}
.readbody a {font-weight: bold; color: green;}
-->
</style>
<script type="text/javascript" src="http://jquery.com/src/latest/"></script>
<script type="text/javascript">
//<![CDATA[
function init() {
$(".article .thebody").hide();
$("#container").find(".article ul").prepend("<li class='readbody'><a href='#' title='Read the body of this article'>Read Body</a></li>");
$(".actions li.readbody a").click(function(event)
{
var mybody = this.parentNode.parentNode;
while (mybody = mybody.previousSibling) {
if (mybody.className == "thebody") break;
};
if (!mybody) return;
$(mybody).toggle();
event.preventDefault();
});
}
$(document).ready(init);
//]]>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQUERY PRACTICE</title>
</head>
<body>
<div id="container">
<div class="article">
<h3>Title 01</h3>
`
<p class="summary">Summary 01</p>
<p class="thebody"><b>BODY ONE</b><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra aliquet mi. Cras urna. Curabitur diam. Curabitur eros nibh, condimentum eu, tincidunt at, commodo vitae, nisi. Duis nulla lectus, feugiat et, tincidunt nec, iaculis vehicula, tortor. Sed tortor felis, viverra vitae, posuere et, ullamcorper a, leo. Suspendisse euismod libero at orci. Pellentesque odio massa, condimentum at, pellentesque sed, lacinia quis, mauris. Proin ultricies risus cursus mi. Cras nibh quam, adipiscing vel, tincidunt a, consequat ut, mi. Aenean neque arcu, pretium posuere, tincidunt non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet ligula.</p>
<ul class="actions"><li><a href="#">comment</a></li><li><a href="#">Trackback</a></li></ul>
</div>
<div class="article">
<h3>Title 02</h3>
<p class="summary">Summary 02</p>
<p class="thebody"><b>BODY TWO</b><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra aliquet mi. Cras urna. Curabitur diam. Curabitur eros nibh, condimentum eu, tincidunt at, commodo vitae, nisi. Duis nulla lectus, feugiat et, tincidunt nec, iaculis vehicula, tortor. Sed tortor felis, viverra vitae, posuere et, ullamcorper a, leo. Suspendisse euismod libero at orci. Pellentesque odio massa, condimentum at, pellentesque sed, lacinia quis, mauris. Proin ultricies risus cursus mi. Cras nibh quam, adipiscing vel, tincidunt a, consequat ut, mi. Aenean neque arcu, pretium posuere, tincidunt non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet ligula.</p>
<ul class="actions"><li><a href="#">comment</a></li><li><a href="#">Trackback</a></li></ul>
</div>
<div class="article">
<h3>Title 03</h3>
<p class="summary">Summary 03</p>
<p class="thebody"><b>BODY THREE</b><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra aliquet mi. Cras urna. Curabitur diam. Curabitur eros nibh, condimentum eu, tincidunt at, commodo vitae, nisi. Duis nulla lectus, feugiat et, tincidunt nec, iaculis vehicula, tortor. Sed tortor felis, viverra vitae, posuere et, ullamcorper a, leo. Suspendisse euismod libero at orci. Pellentesque odio massa, condimentum at, pellentesque sed, lacinia quis, mauris. Proin ultricies risus cursus mi. Cras nibh quam, adipiscing vel, tincidunt a, consequat ut, mi. Aenean neque arcu, pretium posuere, tincidunt non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet ligula.
</p>
<ul class="actions"><li><a href="#">comment</a></li><li><a href="#">Trackback</a></li></ul>
</div>
</div>
</body>
</html>
=========================
thanks,
Jane