‹‹ homejQuery 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() {
      $(this).parent().parent().append('<div class="success">before expand.</div>');
    },
    afterExpand: function() {
      $(this).parent().parent().append('<div class="success">after expand.</div>');
    },
    onCollapse: function(byUser) {
      var by = byUser ? 'user' : 'timer';
      $(this).parent().parent().append('<div class="success">on collapse (' + by + ').</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>

Example 3

The Expander Plugin now works for block-level elements, too.

$('div.expander').expander();