jQuery Expander Plugin

Example 1

The following definition list has two expanders assigned to it, one for the first answer and one for the other two. The second expander has a number of options set for it, including three "callbacks" which invoke functions at three separate moments.

$(document).ready(function() {
  $('dl.expander dd:eq(0)').expander();
  
  $('dl.expander dd:gt(0)').expander({
    collapseTimer: 4000,
    beforeExpand: function($thisElement) {
      $thisElement.parent().parent().append('<div>before expand.</div>');
    },
    afterExpand: function($thisElement) {
      $thisElement.parent().parent().append('<div>after expand</div>');
    },
    onCollapse: function($thisElement, byUser) {
      if (byUser === true) {
        $thisElement.parent().parent().append('<div class="success">on collapse (by user).</div>');          
      } else {
        $thisElement.parent().parent().append('<div class="success">on collapse (by timer).</div>');
      }
    }
    
  });

});

Benedick's Question: I pray you, what is he?: Beatrice's Answer: Why, he is the prince's jester: a very dull fool; only his gift is in devising impossible slanders: none but libertines delight in him; and the commendation is not in his wit, but in his villany; for he both pleases men and angers them, and then they laugh at him and beat him. I am sure he is in the fleet: I would he had boarded me. (Much Ado About Nothing, II.1)
Benedick's Question: I do love nothing in the world so well as you: is not that strange?: Beatrice's Answer: As strange as the thing I know not. It were as possible for me to say I loved nothing so well as you: but believe me not; and yet I lie not; I confess nothing, nor I deny nothing. (Much Ado About Nothing, IV.1)
Karl's Question: Why aren't you using another question from Much Ado About Nothing here?: Karl's Answer: Because I'm lazy. And besides, this demo is getting a little too pretentious.

Note that the third answer does not have a "read more" link because it's using the default value of 100 characters and 4 "widow" words as its cut-off. No sense in linking to read more when there isn't much more to read.

Example 2

The following list items have a single expander assigned to them with a few custom options set.

$('ul.expander li').expander({
  slicePoint: 50, 
  widow: 2,
  expandEffect: 'show', 
  userCollapseText: '[^]'
});

Run a marathon [...]and qualify for Boston.
Climb Mount Everest, or at least Mount Pleasant, and take some pictures while I'm there.
Become proficient at the pogo stick.

Hey, why is the first <li> collapsed? Well, the first list item is a trick! Rather than let the plugin decide where to truncate the text, I put the links and the span directly in the HTML. It looks like this:

<li>Run a marathon <span class="read-more"><a href="#">[...]</a></span><span class="details">and qualify for Boston.</span></li>

‹‹ homejQuery Expander Plugin

Example 1

Example 2