Long Content Truncation With Show More/Less Links – show-more

Category: Javascript | July 12, 2020
Author: tomik23
Views Total: 1 view
Official Page: Go to website
Last Update: July 12, 2020
License: MIT

Preview:

Long Content Truncation With Show More/Less Links – show-more

Description:

show-more is a feature-rich JavaScript library that truncates long contents and replaces the overflowing content with show more and show less links.

Features:

  • Truncates text to a specified number of characters.
  • Truncates an HTML list to a specified number of list items.
  • Truncates an HTML table to a specified number of records (rows).

How to use it:

1. Download and insert the show-more library into the HTML document.

<script src="showMore.min.js"></script>

2. Truncate your long text to a number of characters defined in the data-number attribute:

<p class="demo-1" data-type="text" data-number="140">
  Long Text Here
</p>
new ShowMore('.demo-1', {
    more: ' &#8594; show more',
    less: ' &#8592; less'
})

3. Truncate your long HTML list.

<ul class="demo-2" data-type="list" data-number="5">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  ...
</ul>
new ShowMore('.demo-2', {
    type: 'li',
    more: '&#8595; show more',
    less: '&#8593; less'
})
// hide the overflowing list items
.hidden {
  display:none
}

4. Truncate a large HTML table.

<table class="demo-3" data-type="table" data-number="3">
  Large HTML Table Here
</table>
new ShowMore('.demo-3', {
    more: '&#8595; show more',
    less: '&#8593; less'
})
// hide the overflowing table rows
.hidden {
  display:none
}

5. Customize the styles of the show more & show less buttons.

.showMore, .showLess {
  cursor: pointer;
  color: #222;
}

6. Determine the number of content to be displayed after the show more & show less buttons.

<p class="demo-1" data-type="text" data-number="140" data-after="50">
  Long Text Here
</p>

Changelog:

v1.0.2 (07/12/2020)

  • refactoring

v1.0.1 (06/27/2020)

  • refactoring

You Might Be Interested In:


Leave a Reply