Show and Hide Div for the text that comes dynamically
<p>I have a problem where we have to show/hide some text in the product description in the product detail page. The description has to be shortened upto desired number of lines and by clicking on "more" complete description is to be shown. I taken the following script from the link below:  </p>

<blockquote>
  <p><a href="http://stackoverflow.com/questions/1606336/using-javascript-substring-to-create-a-read-more-link">Using javascript substring() to create a read more link</a>  </p>
</blockquote>

<p>And the code is as follows:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(function() {
        var cutoff = 200;
        var text = $('div.contentdetail').text();
        var rest = $('div.contentdetail').text().substring(cutoff);
        if (text.length &gt; 200) {
          var period = rest.indexOf('.');
          var space = rest.indexOf(' ');
          cutoff += Math.max(Math.min(period, space), 0);
        }  
        rest = text.substring(cutoff);  
        var visibleText = $('div.contentdetail').text().substring(0, cutoff);  
        $('div.contentdetail')  
            .html(visibleText + ('&lt;span&gt;' + rest + '&lt;/span&gt;'))
            .append('&lt;a title="Read More" style="font-weight:bold;display:block;cursor: pointer;"&gt;Read More&amp;hellip;&lt;/a&gt;')  
            .click(function() {  
                $(this).find('span').toggle();  
                $(this).find('a:last').hide();  
            });  
        $('div.contentdetail span').hide();  
    });  
&lt;/script&gt;  
</code></pre>

<p>But with the above script the entire description is converting into text format. But since the description contains unordered lists,header tags etc. it is not considering those. How to modify the above script to display the content as it is.</p>
