Configuration

Simple configuration, just add configuration json to html

            <div class="element" data-config='{ "type": "text", "limit": 120, "more": "&#8594; show more", "less": "&#8592; less" }'>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, quos qui. Recusandae minima esse qui dicta iusto quod quam exercitationem.
</div>

And run the function

            new ShowMore('.element');

You can also use the callback function, see last example

            new ShowMore('.element', {
  onMoreLess: (type, object) => {
    console.log(type, object);
  }
});

You can add your own regular expression

            new ShowMore('.element', {
  regex: {
    image: {
      match: /<img([\w\W]+?)[/]?>/g,
      replace: ''
    }
  }
});

Global config

If you have one type of items that you want to shorten, you can add global configuration, you don't need to add data-config to each item. Below is an example: 

              new ShowMore('.element', {
  config: {
    type: "text",
    limit: 120,
    more: "→ read more",
    less: "← read less"
  }
});


You can also mix, global configuration + data-config. In such cases, the global configuration object will merge with data-config.
For example, we have 10 texts to shorten, then we add the global configuration, but we also have a table that we want to shorten, in this case we add 'data-config' to table - see global configuration

If you have global configuration, you don't need to specify all the variables in the data-config:

<div class="element" data-config='{ "limit": 20 }'>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, deleniti?
</div>

              new ShowMore('.element', {
  config: {
    type: "text",
    limit: 200,
    more: "→ read more",
    less: "← read less"
  }
});

top

More text - without 'after', cut after 120 characters

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia illo temporibus voluptate veritatis porro, dignissimo...
            {
  "type": "text",
  "limit": 120, // show max chars
  "more": "→ show more",
  "less": "← less"
}
If the text is too short, then we have a problem, after should prevent this. See the next example. top

More text - from 'after': 50, prevent cutting after 120 characters

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia illo temporibus voluptate veritatis porro, dignissimos dolore debitis! 
            {
  "type": "text",
  "limit": 120,
  "after": 50, // prevent cutting after 120 characters
  "more": "→ show more",
  "less": "← less"
}
top

More text

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literatur...
            {
  "type": "text",
  "limit": 120,
  "after": 50,
  "more": "→ show more",
  "less": "← less"
}
top

More text, "show more" new line

Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum є...
              {
  "type": "text",
  "limit": 90,
  "element": "div", // adds a 'div' on a new line
  "after": 50,
  "more": "↓ show more",
  "less": "↑ less"
}
top

Element list

              {
  "type": "list",
  "limit": 5,
  "element": "li",
  "more": "↓ show more",
  "less": "↑ less",
  "number": true // adds the number of items to the button
}
top

Element list display-inline

            {
  "type": "list",
  "limit": 3,
  "element": "li",
  "more": "→ show more",
  "less": "← less",
  "number": true
}
top

Element inline

Administracja biur, Badanie i uzdatnianie wody, Motele i zajazdy, Narzędziownie, Odchudzanie, 
            {
  "type": "list",
  "limit": 5,
  "element": "div",
  "more": "↓ show more",
  "less": "↑ less"
}
top

Table more/less rows

ONE TWO THRE
1 2 3
4 5 6
7 8 9 
            {
  "type": "table",
  "limit": 4,
  "more": "↓ show more",
  "less": "↑ less",
  "number": true
}
top

Only "show more"

Administracja biur, Badanie i uzdatnianie wody, Motele i zajazdy, Narzędziownie, Odchudzanie, 
            {
  "type": "list",
  "limit": 5,
  "more": "→ show more" // only the 'show more' button
}
top

Only the ellipsis

It is a long established fact that a reader will be distracted by the readable content of a page wh...
            { 
  "type": "text",
  // cropping the text after 100 characters
  // and adding an ellipse
  "limit": 100,
  // parameter needed when the global configuration
  // has a less/more button
  "nobutton": true
}
top

Individual button appearance more/less

Additional classes to control the appearance of the more/less button btnClass and btnClassAppend
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate laborum eligendi ipsa quam accu...
            { 
  // class that overrides the default
  // appearance of the button
  "btnClass": "extending",
  "type": "text",
  "limit": 100
}
top

Callback function

With the callback function you can, for example, change the color of elements on the page. Click on 'show more' to see ...
            new ShowMore('.element', {
  onMoreLess: (type, object) => {
    const index = object.index;
    const h2 = object.element.parentElement.firstElementChild;

    if (index == 11) {
      if (type === 'expand') {
        h2.setAttribute('style', 'color: #eb00ff;');
        console.log(object);
      } else {
        h2.removeAttribute('style');
        console.log(object);
      }
    }
  }
});
top

HTML tags

It should be remembered that html elements other than <strong></strong> and <b></b> should be placed outside the visible shortened element.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero deserunt dignissimos blanditiis an...
            { 
  "type": "text",
  "limit": 100,
  "more": "→ read more",
  "less": "← read less"
}
top

Global configuration

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia illo temporibus voluptate veritatis porro, dignissimo...
            new ShowMore('.element', {
  config: {
    type: "text",
    limit: 20,
    more: "→ read more",
    less: "← read less"
  }
});
top