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

Preview:

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.

<p class="demo-1" data-config="{ 'type': 'text', 'limit': 140, 'more': '&#8594; show more', 'less': '&#8592; less' }">
  Long Text Here
</p>

3. Truncate your long HTML list.

<ul class="demo-2" data-config="{ 'type': 'list', 'limit': 140, 'element': 'li', 'more': '&#8594; show more', 'less': '&#8592; less' }">
  <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>

// hide the overflowing list items
.hidden {
  display:none
}

4. Truncate a large HTML table and display the number next to the toggle button.

<table class="demo-3" data-config="{ 'type': 'table', 'limit': 140, 'number': true, 'more': '&#8594; show more', 'less': '&#8592; less' }">
  Large HTML Table Here
</table>

// hide the overflowing table rows
.hidden {
  display:none
}

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

.show-more, .show-less {
  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-config="{ 'type': 'text', 'limit': 140, 'after': 50 }">
  Long Text Here
</p>

7. You’re also allowed to initialize the plugin via JavaScript.

new ShowMore('.demo-2', {
    type: 'li',
    more: '↓ show more',
    less: '↑ less',
    showNumber: true
})

Changelog:

v1.0.5 (08/23/2020)

• transferred configuration to JSON in html data-config

v1.0.4 (08/22/2020)

• New parameter showNumber

v1.0.3 (08/06/2020)

• fix ability to disable the (less) option

v1.0.2 (07/12/2020)

• refactoring

v1.0.1 (06/27/2020)

• refactoring