 |
| Lightweight Read More For jQuery and Bootstrap 3 (Images: Plugin JS) |
doLessMore.js is a read more/read less jQuery plugin that truncates multi-line text by height and appends a toggle control to allow you to reveal or hide the truncated content.
How to use it:
1. Make sure you have jQuery library installed in your project.
<script src="/path/to/cdn/jquery.min.js"></script>
2. Include the jQuery doLessMore plugin after jQuery library.
<script src="lessmore.js"></script>
3. Truncate a long block of text if it is higher than 100px.
<div class="dolessmore"> <p>Your Long Content Here</p> </div>
$(function(){
$('.dolessmore').dolessmore();
});
4. The required CSS styles.
.dolessmore { overflow: hidden; }
.dolessmoreblock { position: relative; }
.lm-control {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background: #fff;
text-align: center;
}
.dlmexpand { padding-bottom: 20px; }
5. Customize the height option which will trigger the text truncating.
$(function(){
$('.dolessmore').dolessmore({
lHeight : 100
});
});
6. Override the default toggle icon in the JS.
if(this.autoHeight > this.options.lHeight){
$(el)
.addClass('dolessmoreblock')
.addClass('dlmcontract')
.height(this.options.lHeight)
// override icon classes here
.append('<div class="lm-control"><a href="javascript:void(0)" class="glyphicon glyphicon-menu-down"></a></div>');
this.lmControl(this.autoHeight);
}
Live Demo
See the Pen Lightweight Read More For jQuery and Bootstrap 3 by Plugin JS (@pluginjs) on CodePen.
File Info
- File Name :
- lightweight-read-more-for-jquery-and-bootstrap-3.zip
- Size :
- 84KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT