Thorsday

Thorsday Research Project

Webcommgard: Subduing Loki's Web Mischief


Expandable Text

Files Needed

jquery.expander.js

Inline Code

In the head:

$(document).ready(function() {

  // simple example, using all default options
  // $('div.expandable p').expander();
  
  // *** OR ***
  
  // override some default options
  $('div.expandable p').expander({
	slicePoint:       150,  // default is 100
	expandText:         'read more', // default is 'read more...'
	// collapseTimer:    5000, // re-collapses after 5 seconds; default is 0,
	so no re-collapsing
	userCollapseText: 'Δ'  // default is '[collapse expanded text]'
  });
  
});
		

In the body:

<div class="expandable">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
	consequat. Duis aute irure dolor.
	</p>
	<p>Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
	pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
	officia deserunt mollit anim id est laborum.
	</p>
</div>

		

Special Considerations

Cut off determined by number of characters.Uses a div class "expandable"

Simply degrades by showing text that would be hidden

Implementation

Source

http://plugins.learningjquery.com/expander/index.html#getting-started