Author: | tomickigrzegorz |
---|---|
Views Total: | 3,566 views |
Official Page: | Go to website |
Last Update: | September 20, 2022 |
License: | MIT |
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': '→ show more', 'less': '← less' }"> Long Text Here </p>
3. Truncate your long HTML list.
<ul class="demo-2" data-config="{ 'type': 'list', 'limit': 5, 'element': 'li', 'more': '→ show more', 'less': '← 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': '→ show more', 'less': '← 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', // hide the button nobutton: true, }
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.1.6 (09/20/2022)
- Fixed number: true does not work for inline lists (<li>)
v1.1.5 (07/04/2022)
- Fixed Bug with table button
v1.1.4 (05/27/2022)
- remove console.log
v1.1.3 (05/09/2022)
- new props “nobutton” Diable showing the read more/less button
v1.1.2 (01/30/2022)
- Fixed for Firefox
v1.1.1 (01/15/2022)
- separate file compatible with IE
v1.1.0 (11/23/2021)
- drop IE
- add ‘loose’ parameter – smaller library
- new dist folder width iife, umd and esm library, also minimized files
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