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>');
}
}
});
});
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: '[^]'
});
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>