‹‹ 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?
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.



Paragraph 2: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.