Lightweight Read More Plugin For jQuery and Bootstrap - doLessMore

Lightweight Read More Plugin For jQuery and Bootstrap - doLessMore
File Size: 6.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

doLessMore is a read more / read less plugin for jQuery and Bootstrap 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 Bootstrap project.

<link href="bootstrap.min.css" rel="stylesheet">
...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

2. Include the jQuery doLessMore plugin after jQuery library.

$('.dolessmore').dolessmore();

3. Truncate a long block of text if it is higher than 100px.

$('.container').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.

$('.dolessmore').dolessmore({lHeight : 100});

This awesome jQuery plugin is developed by hammerstrike. For more Advanced Usages, please check the demo page or visit the official website.