View More/Less Buttons Plugin For jQuery - Elimore

File Size: 5.2 KB
Views Total: 4840
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
View More/Less Buttons Plugin For jQuery - Elimore

Elimore is a small and configurable text truncation plugin that trims the text to a specified number of characters and creates View More & View Less links to toggle the visibility of the overflowing characters.

How to use it:

1. Link to jQuery library and the jQuery Elimore plugin's JavaScript.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.elimore.js"></script>

2. Call the function on your text that will be truncated to 130 characters.

<div class="example">
  Lorem ipsum dolor sit amet, consectetur adipiscing 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 in 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.
</div>
$(function(){

  $(".example").elimore();

});

3. Specify the amount of chracters to truncate (Default:130).

$(function(){

  $(".example").elimore({
    maxLength: 140
  });

});

4. Specify the text for the View More & View Less links.

$(function(){

  $(".example").elimore({
    moreText: "More View",
    lessText: "Less View"
  });

});

5. Sometimes you might need to disable the View Less link.

$(function(){

  $(".example").elimore({
    showOnly: true // default: false
  });

});

6. Apply custom styles to the View More & View Less links.

.example > a {
  display:block;
  padding:10px;
  text-align:center;
  text-transform:uppercase;
  color:#fff;
  border: 0;
  background-color: #E74C3C;
  border-bottom: 3px solid #C0392B;
}

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