expand collapse Show x amount characters div ( php issue )
<p>We use this extensively, but I have a question.</p>

<p>I am trying to control the amount of text being displayed using the (more / less ) features of the following script. However because I am pulling in the text via php, it is not working.</p>

<p>Any ideas.</p>

<p>The html with expander div is:</p>

<pre><code>&lt;div class="expandable"&gt;&lt;p&gt;&lt;?=stripslashes(nl2br($r['description']));?&gt;&lt;/p&gt;&lt;/div&gt;
</code></pre>

<p>The script that controls the expandable div is:</p>

<pre><code>    $(document).ready(function() {

  // simple example, using all default options
  $('div.expandable p').expander();

  // *** OR ***

  // override some default options
  $('div.expandable p').expander({
    slicePoint:       120,  // default is 100
    expandText:         '...more', // default is 'read more...'
    collapseTimer:    10000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
    userCollapseText: '...less'  // default is '[collapse expanded text]'
  });

});

The main expander js is:

    (function($) {

  $.fn.expander = function(options) {

    var opts = $.extend({}, $.fn.expander.defaults, options);
    var delayedCollapse;
    return this.each(function() {
      var $this = $(this);
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
        var cleanedTag, startTags, endTags; 
        var allText = $this.html();
        var startText = allText.slice(0, o.slicePoint).replace(/\w+$/,'');
        startTags = startText.match(/&lt;\w[^&gt;]*&gt;/g);
      if (startTags) {startText = allText.slice(0,o.slicePoint + startTags.join('').length).replace(/\w+$/,'');}

        if (startText.lastIndexOf('&lt;') &gt; startText.lastIndexOf('&gt;') ) {
          startText = startText.slice(0,startText.lastIndexOf('&lt;'));
        }
        var endText = allText.slice(startText.length);        
        // create necessary expand/collapse elements if they don't already exist
      if (!$('span.details', this).length) {
        // end script if text length isn't long enough.
        if ( endText.replace(/\s+$/,'').split(' ').length &lt; o.widow ) { return; }
        // otherwise, continue...    
        if (endText.indexOf('&lt;/') &gt; -1) {
            endTags = endText.match(/&lt;(\/)?[^&gt;]*&gt;/g);
          for (var i=0; i &lt; endTags.length; i++) {

            if (endTags[i].indexOf('&lt;/') &gt; -1) {
              var startTag, startTagExists = false;
              for (var j=0; j &lt; i; j++) {
                startTag = endTags[j].slice(0, endTags[j].indexOf(' ')).replace(/(\w)$/,'$1&gt;');
                if (startTag == rSlash(endTags[i])) {
                  startTagExists = true;
                }
              }              
              if (!startTagExists) {
                startText = startText + endTags[i];
                var matched = false;
                for (var s=startTags.length - 1; s &gt;= 0; s--) {
                  if (startTags[s].slice(0, startTags[s].indexOf(' ')).replace(/(\w)$/,'$1&gt;') == rSlash(endTags[i]) 
                  &amp;&amp; matched == false) {
                    cleanedTag = cleanedTag ? startTags[s] + cleanedTag : startTags[s];
                    matched = true;
                  }
                };
              }
            }
          }

          endText = cleanedTag &amp;&amp; cleanedTag + endText || endText;
        }
          $this.html([
            startText,
            '&lt;span class="read-more"&gt;',
            o.expandPrefix,
            '&lt;a href="#"&gt;',
              o.expandText,
            '&lt;/a&gt;',
        '&lt;/span&gt;',
            '&lt;span class="details"&gt;',
              endText,
            '&lt;/span&gt;'
            ].join('')
          );
      }
      var $thisDetails = $('span.details', this),
        $readMore = $('span.read-more', this);
      $thisDetails.hide();
        $readMore.find('a').click(function() {
          $readMore.hide();

          if (o.expandEffect === 'show' &amp;&amp; !o.expandSpeed) {
          o.beforeExpand($this);
            $thisDetails.show();
          o.afterExpand($this);
          delayCollapse(o, $thisDetails);
          } else {
          o.beforeExpand($this);
            $thisDetails[o.expandEffect](o.expandSpeed, function() {
            $thisDetails.css({zoom: ''});
            o.afterExpand($this);
            delayCollapse(o, $thisDetails);
            });
          }
        return false;
        });
      if (o.userCollapse) {
        $this
        .find('span.details').append('&lt;span class="re-collapse"&gt;' + o.userCollapsePrefix + '&lt;a href="#"&gt;' + o.userCollapseText + '&lt;/a&gt;&lt;/span&gt;');
        $this.find('span.re-collapse a').click(function() {

          clearTimeout(delayedCollapse);
          var $detailsCollapsed = $(this).parents('span.details');
          reCollapse($detailsCollapsed);
          o.onCollapse($this, true);
          return false;
        });
      }
    });
    function reCollapse(el) {
       el.hide()
        .prev('span.read-more').show();
    }
    function delayCollapse(option, $collapseEl) {
      if (option.collapseTimer) {
        delayedCollapse = setTimeout(function() {  
          reCollapse($collapseEl);
          option.onCollapse($collapseEl.parent(), false);
          },
          option.collapseTimer
        );
      }
    }
    function rSlash(rString) {
      return rString.replace(/\//,'');
    }    
  };
    // plugin defaults
  $.fn.expander.defaults = {
    slicePoint:       500,  // the number of characters at which the contents will be sliced into two parts. 
                            // Note: any tag names in the HTML that appear inside the sliced element before 
                            // the slicePoint will be counted along with the text characters.
    widow:            4,  // a threshold of sorts for whether to initially hide/collapse part of the element's contents. 
                          // If after slicing the contents in two there are fewer words in the second part than 
                          // the value set by widow, we won't bother hiding/collapsing anything.
    expandText:       '... more', // text displayed in a link instead of the hidden part of the element. 
                                      // clicking this will expand/show the hidden/collapsed text
    expandPrefix:     '&amp;hellip; ',
    collapseTimer:    0, // number of milliseconds after text has been expanded at which to collapse the text again
    expandEffect:     'fadeIn',
    expandSpeed:      '',   // speed in milliseconds of the animation effect for expanding the text
    userCollapse:     true, // allow the user to re-collapse the expanded text.
    userCollapseText: '',  // text to use for the link to re-collapse the text
    userCollapsePrefix: ' ',
    beforeExpand: function($thisEl) {},
    afterExpand: function($thisEl) {},
    onCollapse: function($thisEl, byUser) {}
  };
})(jQuery);
</code></pre>

<p>Seemingly the content : <code>&lt;p&gt;&lt;?=stripslashes(nl2br($r['description']));?&gt;&lt;/p&gt;</code></p>

<p>Wrapped by the Div tags is ignoring the js </p>

<p>Any suggestions.</p>
