The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
More/Less Text Collapser
More/Less Text Collapser is a simple jQuery plugin to add more/less controls to a portion of text in your html. It will truncate your text at a secified point and add a control to show or hide the truncted content.
Main Features
- Collapse large blocks of text into a few lines with a '...more' link to expand the text.
- Searches within a range to find a character to start hiding content.
- Can specify callback function.
- Can override animation speed.
- Can override animation speed.
- Can specify minimum length to allow truncating.
Usage:
Default options:
<div class="myContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend enim convallis quam dictum tristique. Aliquam erat volutpat. Mauris sagittis ornare mauris et sollicitudin. Aenean cursus laoreet justo ac eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce lacus ante, tristique sit amet facilisis ut, malesuada ut libero. Integer molestie nunc vitae felis faucibus in laoreet dui malesuada. Fusce sollicitudin viverra arcu, non imperdiet mauris rutrum id. Nunc blandit urna et erat rhoncus convallis. Donec vitae magna non orci porttitor placerat vitae vitae neque. Ut quis leo orci, eu euismod est. Pellentesque augue risus, commodo pulvinar cursus ac, aliquet non ante. Nam viverra vulputate mauris a accumsan.
<br /><br />
Aliquam sed diam urna. Maecenas id ligula lectus. Sed sagittis, libero aliquam dictum venenatis, ligula augue vulputate sapien, in adipiscing risus eros a elit. Cras in volutpat ante. Nam viverra ornare ultricies. Morbi fringilla orci id purus laoreet tempus a quis enim. Curabitur at urna odio. Aenean ultrices augue sit amet ante posuere egestas. Nunc fringilla lorem ac magna ornare venenatis et nec neque. Etiam sit amet massa diam. Suspendisse tortor ligula, egestas sed tempus eu, pulvinar id sapien. Vestibulum nec condimentum metus. Donec eleifend auctor consequat. In id ipsum vitae nisl ornare semper. Aliquam erat volutpat. Aliquam pharetra gravida dui, tristique tempor justo sollicitudin vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<script type="text/javascript">
$('.myContent').moreLess();
</script>Slow animation, begin collapsing at 200 characters and use callback
$('.myContent').moreLess({
speed:'slow',
callback: function(){alert('done');}
});Options
- startExpanded: Whether text starts expanded or collapsed. Default(false)
- collapsedText: Expander control. Default('... More')
- expandedText: Collapser control. Default('Less...')
- truncateIndex: Minimum index to begin collapsing the text. Default(150)
- maximumTruncateIndex: Maximum index to begin collapsing the text. Default(200)
- truncateChar: Character to search for to begin collapsing the text at. Default(' ')
- minimumTextLength: Minimum content length necessary to allow collapsing of text. Default(300)
- speed: Collapse/Expand animation speed. Default('fast')
- callback: Callback function to execute after Collapse/Expand animation has completed.Default(null)
