无法使用jquery应用截断段落

Question

i have written a small jquery function for Truncateing paragraph. But it does not work for me. i.e it does not show a link for me "show more" or "show less".

Please help me to solve my problem.

My code works perfect if my paragraph is simple/manual. But if i show a paragraph added through a rich text editor,which contains some bold words, para etc Then a face problem.(i.e it does not show a link for me "show more" or "show less".)

eg.

works good if my para is (without any <b>,<p>)**

<p class="descpara">  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem      </p>

Does not work if i include(<b>..</b> ,<p>..</p>)

  <p class="descpara">  
<b>Lorem Ipsum </b>is simply <p> dummy text of the printing and typesetting industry.</p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem 
       </p>

My jquery function

jQuery(function()
        { 
        var minimized_elements = $('p.descpara');

         var desc_minimized_elements = $('p.descpara');
        minimized_elements.each(function()
        {    
             var t = $(this).text();        
             if(t.length < 300) return;

             $(this).html(
                 t.slice(0,300)+'<span>... </span><a href="#" class="more">More details</a>'+
                 '<span style="display:none;">'+ t.slice(300,t.length)+' <a href="#" class="less">Less details</a></span>'
             );

         });  
         $('a.more', minimized_elements).click(function(event){
             event.preventDefault();
             $(this).hide("fast").prev().hide("slow");
             $(this).next().show("fast");        
         });

         $('a.less', minimized_elements).click(function(event){
             event.preventDefault();
             $(this).parent().hide().prev().show().prev().show();    
         }); 
       });

and in my view.php page

   <div class="products">
         <div id="bookcont">
           <?php echo"<div id='btitle'>$row->book_title</div></br>";  
               echo "<p>by $row->auth_firstname   $row->auth_lastname</p>"; ?> 
             <div class="detail"> 

             <!--  A long text paragraph, i am apply for this -->
              <p class="descpara">  
                   <?php echo $row->description?>
               </p> 
         </div> 
       </div> 

Current output after apply code as said :

Answer 1

The problem is that you have <p> inside a <p>

Solution: use <div> instead of <p> for the container, see here: http://jsfiddle.net/tbE8V/1/

Also note if you want to keep the rich text you need to extract the container html not text

var minimized_elements = $('div.descpara');  // <--- note div not p  (change in html as well)

     var desc_minimized_elements = $('div.descpara');
    minimized_elements.each(function()
    {    
         var t = $(this).html();    // <--- note taken html not text

Also - that your solution may have problems with rich text(!!!) ie. if the 300 character limit may end up in between <b> and </b>, or even in the middle of the element name (eg. in the middle of "<small>")

---

edit:

To handle the rich text problem, I suggest your javascript should check the height of the container element, not the number of characters in the string. If it is more than the desired height then apply a "hide-overflow" css class which will have max-height and overflow:hidden, and also add the "more" link. Clicking the "more" will just remove the "hide-content" class from the container and change the link to "less".