JSFiddle - React, Tailwind, and code Playground

by Peter Galiba

HTML

<div id="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio felis, accumsan eget aliquet vitae, faucibus et turpis. Sed in enim libero. Aliquam pretium sapien nec odio consequat at convallis neque bibendum. Maecenas tortor nibh, porta nec gravida eu, eleifend nec magna. Phasellus sollicitudin elit at quam sollicitudin vitae ultrices erat condimentum. Curabitur vitae mauris vel magna commodo elementum eu non nisl. Aliquam rhoncus dui quis nibh iaculis eget eleifend metus convallis. Nullam sed mauris fermentum tellus posuere varius sit amet quis odio. Integer congue, massa eget ullamcorper venenatis, libero sem laoreet ipsum, eu adipiscing augue tellus sagittis nisl. Nam.</div>

JavaScript

var item = document.getElementById('item'),
    text = item.firstChild.nodeValue,
    punctations = /[.!?\u00a1\u203c\u2026\u00bf\u203d]\s|\u3002/,
    result, more, teaser, teaserNode, children, i, length,
    displayed = false;
    teaserLength = 50;
if (text.length > teaserLength) {
  result = punctations.exec(text.slice(teaserLength));
  if (result) {
    teaser = text.slice(0, teaserLength + result.index + result[0].length);

    // Eltávolítjuk a gyerekeket
    children = item.childNodes;
    for (i = 0, length = children.length; i < length; i += 1) {
      item.removeChild(children[i]);
    }

    // Lecseréljük a tartalmat
    teaserNode = document.createElement('span')
    teaserNode.appendChild(document.createTextNode(teaser));
    item.appendChild(teaserNode);
    more = document.createElement('span');
    more.style.display = 'none';
    more.appendChild(document.createTextNode(text.slice(teaser.length)));
    item.appendChild(more);

    // Kezzeljük a kattogtatást.
    item.onclick = function () {
      displayed = !displayed;
      more.style.display = displayed ? 'inline' : 'none';
    }
  }
}