Multiline Truncation With Ellipsis And Toggle Links - jQuery multiTextToggleCollapse

Multiline Truncation With Ellipsis And Toggle Links - jQuery multiTextToggleCollapse
File Size: 6.68 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another multi-line text truncation plugin that truncates & collapse long text block by lines and allows the visitor to toggle the truncated text with Read More & Read Less links.

See also:

How to use it:

1. Insert the multiTextToggleCollapse plugin's JavaScript and CSS files into the HTML file.

<link href="src/index.css" rel="stylesheet">
<script src="/path/to/cdn/jquery-1.12.4.min.js"></script>
<script src="src/jquery.multiTextToggleCollapse.js"></script>

2. Attach the function to the multiTextToggleCollapse to the text block and limit the size of the text by lines (Default: 4).

<p class="example">Fusce sit amet augue sapien. Donec aliquam nulla id massa aliquet pulvinar. Sed diam nibh, cursus in congue et, ornare in urna. Praesent eget ex nec risus dapibus efficitur non blandit nunc. Etiam dictum malesuada ex, eget blandit nisl pretium vel. Phasellus ultricies pulvinar libero quis tempor. Donec id dolor bibendum, dapibus libero eu, lacinia odio. Integer pretium, tellus sed tincidunt dignissim, ante massa sollicitudin arcu, vel lobortis dolor nulla nec ligula. Aliquam elementum metus eu lectus molestie, eu ultricies nisl dignissim. Nulla ut lorem eget orci consectetur venenatis. Duis eget cursus sapien. Morbi tincidunt elit turpis, at tincidunt leo bibendum at. Pellentesque fringilla non sapien et fringilla. Vivamus viverra facilisis nisi quis tincidunt. Sed euismod molestie enim eget fermentum. Curabitur ut quam mollis, volutpat mauris quis, sodales odio.</p>
$(function(){
  $(".example").multiTextToggleCollapse({
    line: 5
  });
});

3. Override the default Read More & Read Less text in the JavaScript.

expandBtn.innerHTML = "More";
collapseBtn.innerHTML = "Read Less";

4. Override the default styling of the ellipsis.

.tool-multiwrapbox .multi-text_after {
  float: right;
  text-align: right;
  width: 6em;
  margin-left: -6em;
  position: absolute;
  left: 100%;
  padding-right: 5px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

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