How to Hide/Show More Text Link | LineShowMoreLess

The height of the box will be determined by the appropriate max height with the overflow set to the concealer.

Read more and less read from the jQuery plugin that folds more text than the specified lines and creates a show more link to toggle full content.

How to make use of it:

1. Put the minified version of the LineShowMoreLess plugin after the jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/showmoreless.min.js"></script>

2. Call the function myOwnLineShowMoreLess on the text block and decide how many lines your text must be truncated.

<div class="show-less-div">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor, lorem eget sagittis accumsan, dui nisl dictum sapien, a gravida nulla augue sit amet tortor. Proin fermentum erat a lobortis fringilla. Quisque id venenatis magna, sed gravida nulla. Fusce euismod ligula sed mauris finibus auctor. Donec nec neque id urna rutrum rhoncus. Suspendisse vehicula ante sed dolor euismod, vitae laoreet lectus tincidunt. Phasellus tincidunt pellentesque volutpat. Praesent ut velit sit amet dui maximus bibendum quis porttitor lacus. Mauris justo lectus, ullamcorper sit amet sodales nec, cursus a turpis. Integer sed libero semper, facilisis neque ut, venenatis neque.
</div>
$(function(){
  $('.show-less-div').myOwnLineShowMoreLess({
    showLessLine: 3
  });
})

3. Customize the Show Less & Show More buttons.

$(function(){
  $('.show-less-div').myOwnLineShowMoreLess({
    showLessText:'Read Less',
    showMoreText:'Read More'
  });
})

4. Determine whether to indicate the total content material on the web page load and display a Show Less button at the end of the text block.

$(function(){
  $('.show-less-div').myOwnLineShowMoreLess({
    lessAtInitial: false
  });
})

5. Determine whether to display a Show Less button at the end of the textual content block after being expanded.

$(function(){
  $('.show-less-div').myOwnLineShowMoreLess({
    showLessAfterMore: false
  });
})

Check Here – Create Blinking Text Effect Using jQuery Plugin | jblink

Plugin parameters

showLessLine

  • Type: Integer
  • Default: 1

To set how many line(s) you want to show when the plugin shows less text

lessAtInitial

  • Type: Boolean
  • Default: true

When the page loads, we can set how we want to show text whether less or more

showLessAfterMore

  • Type: Boolean
  • Default: true

If we expand text by clicking Show More, then we can control that we need to show the Show Less option by this param. If it is false, then Show Less will not show after the text is expanded.

Note: If we want to use this param with false, then we should use lessAtInitial: true together with this option.

showLessText

  • Type: String
  • Default: Show Less

We can change the Show Less text with this param.

showMoreText

  • Type: String
  • Default: Show More

We can change the Show More text with this param.

Limit Text Length And Show Read More Link, read more hide show, show hide more content

Read More – 

jQuery Plugin That Converts Plain Text URLs Into HTML Links | Linkify
JavaScript Library To Animate Placeholder Text In Input Fields


See Demo And Download

Official Website(siva7170): Click Here

This superior jQuery/javascript plugin is developed by siva7170. For extra Advanced Usage, please go to the official website.

Share