Cloning a selector + all its children in jQuery?
- by HipHop-opatamus
I'm having trouble getting the following JQuery script to function properly - its functionality is as follows:
1) Hide the content below each headline
2) Upon clicking a headline, substitute the "#first-post" with the headline + the hidden content below the headline.
I can only seem to get the script to clone the headline itself to #first-post, not the headline + the content beneath it. Any idea why?
<HTML>
<HEAD>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</HEAD>
<script>
$(document).ready(
function(){
$('.title').siblings().hide();
$('.title').click( function() {
$('#first-post').replaceWith($(this).closest(".comment").clone().attr('id','first-post'));
$('html, body').animate({scrollTop:0}, 'fast');
return false;
});
});
</script>
<BODY>
<div id="first-post">
<div class="content"><p>This is a test discussion topic</p> </div>
</div>
<div class="comment">
<h2 class="title"><a href="#1">1st Post</a></h2>
<div class="content">
<p>this is 1st reply to the original post</p>
</div>
<div class="test">1st post second line</div>
</div>
<div class="comment">
<h2 class="title"><a href="#2">2nd Post</a></h2>
<div class="content">
<p>this is 2nd reply to the original post</p>
</div>
<div class="test">2nd post second line</div>
</div>
</div>
<div class="comment">
<h2 class="title"><a href="#3">3rd Post</a></h2>
<div class="content">
<p>this is 3rd reply to the original post</p>
</div>
<div class="test">3rd post second line</div>
</div>
</div>
</BODY>
</HTML>
