show-more-read v1.0.0

Show More/Less

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.

Demo

https://tomik23.github.io/show-more/

Clone the repo and install dependencies

git clone
cd show-more
yarn
# or
npm i

Watch/Build the app

Watch the app, just call:

yarn dev
# or
npm run dev

Build app:

yarn prod
# or
npm run prod

Configuration of the plugin

For text:

<div class="your-class" data-type="text" data-number="80" data-after="30">
  Lorem ipsum, dolor ...
  ...
</div>

For list:

<ul class="your-class" data-type="list" data-number="5" data-after="3">
  <li>Import win</li>
  ...
</ul>
<!-- or -->
<ol class="your-class" data-type="list" data-number="5" data-after="3">
  <li>Import win</li>
  ...
</ol>
<!-- or -->
<div class="your-class" data-type="list" data-number="5" data-after="3">
  <a href="#">Administracja biur</a>
  ...
</div>

For table:

<table class="your-class" data-type="table" data-number="2" data-after="3">
  ...
</table>

^ 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
  });
});

Browsers support