Press "Enter" to skip to content

Multiline Truncated Text With Show More/Less Links | show-more

Show more/less JavaScript library that breaks text (HTML experimental), lists or table by characters, elements, or row, and shows/hides blocks of text, elements, or table row using Show More and Show Less.

show more show less css, show more show less jquery examples, show more button, show more show less jquery dynamically, dynamically shortened text with show more link

Features:

  • Truncates textual content to a specified variety of characters.
  • Truncates an HTML record to a specified variety of record objects.
  • Truncates an HTML table to a specified variety of data (rows).

How to make use of it:

1. Download and insert the show-more library into the HTML doc.

<script src="showMore.min.js"></script>

2. Truncate your lengthy textual content to a variety of characters outlined within the data-number attribute:

<p class="demo-1" data-type="text" data-number="140">
  Long Text Here
</p>
new ShowMore('.demo-1', {
    more: ' → show more',
    less: ' ← less'
})

3. Truncate your lengthy HTML code.

<ul class="demo-2" data-type="list" data-number="5">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  ...
</ul>
new ShowMore('.demo-2', {
    type: 'li',
    more: '↓ show more',
    less: '↑ less'
})
// hide the overflowing list items
.hidden {
  display:none
}

4. Truncate a big HTML table – Javascript Show Hide More Text.

  Large HTML Table Here
<table class="demo-3" data-type="table" data-number="3"></table>
// hide the overflowing table rows
.hidden {
  display:none
}

5. Customize the kinds of the present extra & present much fewer buttons.

.showMore, .showLess {
  cursor: pointer;
  color: #222;
}

6. Determine the variety of content material to be displayed after the present extra & present much fewer buttons.

<p class="demo-1" data-type="text" data-number="140" data-after="50">
  Long Text Here
</p>

7. Determine whether or not to indicate the quantity subsequent to the toggle button.

new ShowMore('.demo-2', {
    type: 'li',
    more: '↓ show more',
    less: '↑ less',
    showNumber: true
})

Configuration of the plugin

elementrequiredescription
your-classname of the class after which we want to add support for showing/hiding text, list or table
data-configembedding JSON in the html, the entire configuration of a particular element
typewe have three type after which it will be hidden [text, list or table]
limittext after how many characters to hide the text and insert show more/less
list or table after how many elements/rows hide the rest and insert show more/less
after this parameter checks how much text is after the trimmed text the limit parameter, if the text is less than the after parameter does not add a more/less button`^.
element on the parameter we will create an html element and put in the text show more/less
more/less is the text and chars that appears after the text, list or table e.g. > show more and < show less
number number of hidden items to show more/less e.g. -> show more 3, only works for list and table
ellipsis By default, adding an ellipsis to shortened text can be turned off by setting ‘ellipsis’: false
regex adding your own regular expressions. It is an object with two parameters match and replace, see example below
btnClass Button class name. Default: show-more-btn
btnClassAppend Opportunity to add additional classes to the button
onMoreLess callback function

Long Content Truncation With Show More/Less Links, Show More Show Less CSS, CSS Show More if Overflow, show more show less jquery with animation


See Demo And Download

Official Website(tomik23): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.