JavaScript library that truncates text, list or table by chars, elements or row and shows/hides text blocks, elements or table row with Show More and Show Less.
git clone
cd show-more
yarn
# or
npm i
Watch the app, just call:
yarn dev
# or
npm run dev
Build app:
yarn prod
# or
npm run prod
<link rel="stylesheet" href="style.css">
<script src="showMore.min.js"></script>
<div class="example-text" data-type="text" data-number="80" data-after="30">
Lorem ipsum, dolor ...
...
</div>
new ShowMore('example-text', {
more: ' → show more',
less: ' ← less'
});
<ul class="example-list" data-type="list" data-number="5" data-after="3">
<li>Import item 1</li>
<li>Import item 2</li>
...
</ul>
new ShowMore('example-list', {
type: 'li',
more: ' → show more',
less: ' ← less'
});
<div class="example-list-b" data-type="list" data-number="5" data-after="3">
<a href="#">item 1</a>
<a href="#">item 2</a>
...
</div>
new ShowMore('example-list-b', {
more: ' → show more',
less: ' ← less'
});
<table class="example-table" data-type="table" data-number="2" data-after="3">
...
</table>
new ShowMore('example-table', {
more: ' → show more',
less: ' ← less'
});
element | description |
---|---|
data-type |
we have three type after which it will be hidden [text, list or table] |
data-number |
text after how many characters to hide the text and insert show more/less |
list or table after how many elements/rows hide the rest and insert show more/less |
|
data-after |
this parameter allows you to set how much text/elements/rows |
should be after the show more/less button ^. |
^ Let’s say we have 20 records with text and we determine that the text is to be trimmed after 100 characters in each record, it may happen that in several records the text is very short and has 110 characters, so show more/less
will appear after 100 characters and after clicking an additional 10 characters, it will look funny. To prevent this, we add the data-after="50"
parameter, which means that the hidden text must be at least 50 characters. Otherwise, show more/less
will not appear. The same data-after
can be applied to lists, elements and table records
Number of records counted in the table tr
based on all tr
of thead
, tbody
and tfoot
document.addEventListener('DOMContentLoaded', function() {
// text, table, list, elelemnts
new ShowMore('your-class', {
type: 'span', // [div, li, a, ...] parameter not required
more: ' → show more', // text before expanding
less: ' ← less' // expanded text
});
});
element | description |
---|---|
your-class |
name of the class after which we want to add support for showing/hiding text, list or table |
type |
on the parameter we will create an html element and put in the text show more/less |
more/less |
is the text and chars that appears after the text, list or table e.g. > show more and < show less |
Author: tomik23
Live Demo: https://tomik23.github.io/show-more/
GitHub: https://github.com/tomik23/show-more
#javascript #programming