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 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: ' → show more',
    less: ' ← 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: '↓ show more',
    less: '↑ 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: '↓ show more',
    less: '↑ 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