Author: | tomik23 |
---|---|
Views Total: | 152 views |
Official Page: | Go to website |
Last Update: | February 10, 2021 |
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': 140, 'element': 'li', 'more': '→ show more', 'less': '← 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': '→ 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('.demo-2', { type: 'li', more: '↓ show more', less: '↑ less', number: true, ellipsis: false // show only the ellipsis })
8. Callback function.
new ShowMore('.demo-2', { onMoreLess: (type, object) => { // type = less/more and full object console.log(typeAria, object); } })
Changelog:
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