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': 5, 'element': 'li', 'more': '&#8594; show more', 'less': '&#8592; less', "number": true }">
  <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('.elementClass', {
    type: 'li',
    more: '↓ show more',
    less: '↑ less',
    number: true,
    ellipsis: false // show only the ellipsis
})

8. All configs.

{
  
  // text, list or table
  type: 'text',

  // number of characters/rows/elements to preserve
  limit: 5,

  // number of hidden items to show more/less
  number: 10,

  // checks how much text is after the trimmed text the limit parameter, if the text is less than the after parameter does not add a more/less button
  after: 50,

  // element to hold the show more/less text
  element: null,

  // adds an ellipsis to shortened text
  ellipsis: true,

  // custom more/less text
  more: 'More',
  less: 'Less',

  // button class
  btnClass: 'show-more-btn',

  // ppportunity to add additional classes to the button
  btnClassAppend: 'cssClass',

}

9. Truncate content using your own regular expression.

new ShowMore('.elementClass', {
  regex: {
    image: {
      match: /<img([\w\W]+?)[/]?>/g,
      replace: ''
    }
  }
});

10. Callback function.

new ShowMore('.demo-2', {
    onMoreLess: (type, object) => {
      // type = less/more and full object
      console.log(typeAria, object);
    }
})

Changelog:

v1.0.20 (09/22/2021)

• Added global configuration

v1.0.19 (09/08/2021)

• update

v1.0.17 (06/12/2021)

• HTML tags (experimentally)

v1.0.16 (05/25/2021)

• fix The error occurs when an object is missing

v1.0.15 (05/25/2021)

• fix Problem with truncated after 1-2 characters

v1.0.14 (05/23/2021)

• add an ellipsis to the text by default

v1.0.13 (05/07/2021)

• Bugfixes

v1.0.12 (05/07/2021)

• fix Issue with Cyrillic characters

v1.0.11 (02/10/2021)

• Usability replacing span on button

v1.0.10 (01/30/2021)

• Added callback function ‘onAction’

v1.0.9 (01/18/2021)

• fix: no less element

v1.0.8 (01/16/2021)

• feat only ellipses with no buttons

v1.0.7 (10/30/2020)

• Update

v1.0.6 (09/29/2020)

• Feat reducing the size of the library
• Refactor small changes scss

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