Show/Hide Long Text Based On Max Length - jQuery show-hide-text

show-hide-text is a small jQuery based 'Truncate Text By The Number Of Characters' plugin which enables the users to show and hide long text with Read More and Read Less links.

How to use it:

1. Wrap your long text into a container element like this:

<div class="myContent">
  Your long content here
</div>

2. Wrap your long text into a container element like this:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/show-hide-text.js"></script>

3. Call the function on the container element and done. By default, the plugin will automatically truncate the text to 100 characters.

new showHideText('.myContent');

4. Specify the maximum number of characters to be displayed.

new showHideText('.myContent', {
    charQty     : 250
});

5. Specify the ellipse character displayed at the end of truncated text.

new showHideText('.myContent', {
    charQty     : 250,
    ellipseText : "..."
});

6. Customize the 'Read More' and 'Read Less' text.

new showHideText('.myContent', {
    charQty     : 250,
    ellipseText : "...",
    moreText    : "Read more",
    lessText    : "Read less"
});

7. Apply your own CSS styles to the 'Read More' and 'Read Less' links.

.morelink {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: relative;
  margin-top: 20px;
  font-size: 13px;
  color: #ececec;
}

.morelink:after {
  content: '';
  -ms-flex-item-align: start;
      align-self: flex-start;
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-top: 6px;
  margin-left: 10px;
  border: 1px solid #ececec;
  border-top: none;
  border-right: none;
  background: transparent;
  transform: rotate(-45deg);
  transform-origin: bottom;
}

.morelink.less:after {
  margin-left: 7px;
  transform: rotate(135deg);
}

---

This awesome jQuery plugin is developed by RublikFun. For more Advanced Usages, please check the demo page or visit the official website.