jquery wrap sibling elements

Question

The following markup will have some extra elements injected into it (ie: a div containing some flash for example). How can i dynamically wrap all of the p tags in one div and add a button above it to toggle that newly made div?

<div class="post">
  <p>blquehrgéoqihrteoijth</p>
</div>

<div class="post">
  <p>blquehrgéoqihrteoijth</p>
  <p>blquehrgéoqihrteoijth</p>
  <p>blquehrgéoqihrteoijth</p>
  <p>blquehrgéoqihrteoijth</p>
</div>

Answer 1

I would do the following for simplicity:

$('.post').prepend("<h3 class='showText'>biography</h3>\n<div class='toggle'>");
$('.post').append("</div>");

Should do what you require.

Edit 1: Added cballou's comment code here for easier readability:

$j('h3').live('click', function() {
  $j(this).toggleClass('hideText').slideToggle(300);
});

Answer 2

I'd just extract the existing HTML and wrap it (as text), then reinsert it.

$('.post').each( function() {
    $(this).html('<h3 class="showText">biogrpahy</h3><div class="toggle">'
                  + $(this).html()
                  + '</div>');
});

Answer 3

$j('.post').wrapAll("<div class='toggle'></div>");
$j('.toggle').before('<h3 class="showText">bibliography</h3>');
$j('h3').live('click',function(){
    $j(this).toggleClass('hideText');
    $j('.toggle').slideToggle(300);
});