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

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia illo temporibus voluptate veritatis porro, dignissimos dolore debitis! 
            {
  "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.

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"
}

More text

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. 
            {
  "type": "text",
  "limit": 120,
  "after": 50,
  "more": "→ show more",
  "less": "← less"
}

More text, "show more" new line

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

Element list

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

Element list display-inline

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

Element inline

Administracja biur, Badanie i uzdatnianie wody, Motele i zajazdy, Narzędziownie, Odchudzanie, Pamiątki i upominki, Silikon, Tapety, Żegluga 
            {
  "type": "list",
  "limit": 5,
  "element": "div",
  "more": "↓ show more",
  "less": "↑ less"
}

Table more/less rows

ONE TWO THRE
1 2 3
4 5 6
7 8 9
10 11 12
13 14 15
= 35 = 40 = 45 
            {
  "type": "table",
  "limit": 4,
  "more": "↓ show more",
  "less": "↑ less",
  "number": true
}

Only "show more"

Administracja biur, Badanie i uzdatnianie wody, Motele i zajazdy, Narzędziownie, Odchudzanie, Pamiątki i upominki, Silikon, Tapety, Żegluga 
            {
  "type": "list",
  "limit": 5,
  "more": "→ show more" // only the 'show more' button
}

Only the ellipsis

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
            { 
  "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
}

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 accusantium sit nisi. Numquam soluta molestias id, ullam officia atque. Architecto assumenda dicta voluptatum voluptatem, iste distinctio. 
            { 
  // class that overrides the default
  // appearance of the button
  "btnClass": "extending",
  "type": "text",
  "limit": 100
}

Callback function

With the callback function you can, for example, change the color of elements on the page. Click on 'show more' to see what happens. 
            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);
      }
    }
  }
});

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 animi esse veritatis, quasi, ab, commodi itaque quisquam delectus inventore perspiciatis corrupti!
one two three
a b c
d e f
Sequi debitis suscipit molestias, eligendi ab odit ullam. Vero eius debitis quis corporis, possimus veniam sit fugit aliquid. Fuga, libero eaque consequuntur ipsa esse omnis, ad eius laboriosam reprehenderit iste quaerat vitae quis corrupti saepe veniam, ullam placeat voluptatum sint dolore sunt quo. Voluptate fugit quo architecto laboriosam ipsam pariatur delectus iusto consectetur provident odio amet tempora veniam velit at deleniti sint soluta accusamus, praesentium necessitatibus maxime.

Aliquam necessitatibus porro dolores atque aliquid itaque, ad maiores! 
            { 
  "type": "text",
  "limit": 100,
  "more": "→ read more",
  "less": "← read less"
}

Global configuration

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