Trouble using .wrapAll on multiple elements

Trouble using .wrapAll on multiple elements

Hello there, because the content I need altered is being generated in a specific way, I need to wrap a certain amount of p tags inside certain divs in order to toggle it later.

I have the follwing code :

//This function hides/shows a portion of text inside the post
         
         //Wrap all p elements into a div with a class of toggle
         $j('.post-alt > p').wrapAll("<div class='toggle'></div>");
         
         $j('.toggle').before('<h3></h3>');
                  
         //Calculate and append the height of the element (avoids the jumping effect when using slideToggle) then hide the element
         //$('#text').css("height",$(this).height()+"px");
         $j('.toggle').hide();
         
         //Append text and class to the element
         var showText = "biography";
         
         $j(".toggle").prev().append(''+showText+'').attr({'class' : 'showText'});
         
         //Catch the event and toggle the text
         $j('h3').click(function(){
            $j(this).toggleClass('hideText');
            $j('.toggle').slideToggle(300);
         });
         
      });

It works fine when my page displays only one div with the class of post-alt. If there is more than one then it takes all the p tags of the page and wraps them in one div ... I've tried using .each as :

      $j('.post-alt').each(function(){
               $j('.post-alt > p').wrapAll("<div class='toggle'></div>");
         });


Without luck. The example can be seen at :

http://www.files.turbodurso.com/showhide/test.html

I hope it's clear ... Thanks in advance