‹‹ 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:

$(document).ready(function() {
  $('dl.expander dd:eq(0)').expander();
  $('dl.expander dd:gt(0)').expander({collapseTimer: 4000});

});

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 <a class="read-more" href="#">[...]</a><span class="details">and qualify for Boston.</span></li>