jQuery Three Dots Plugin But Extandlable

Question

Is there any jQuery plugin that will summarize my text i.e.:

 123456789

into

 1234...

However when I click that three dots it will expand it and show:

 123456789

Without plugin css and jquery is welcome.

Any ideas?

Answer 1

There are several plugins for this, and it's so easy that you can probably create your own as well.

But, taking the work from someone else, here is a couple:

• jQuery Expander Plugin
• Jquery Plugin: readmore

Answer 2

CSS-only solution:

.truncate {
    width: 250px; /* TODO: set as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.truncate:hover {
    white-space: normal;
    overflow: visible;
    text-overflow: inherit;
}

You could also rig something that'd do so on click via:

$(".truncate").click(function () { $(this).addClass("noTruncate"); }

and then change .truncate:hover to .noTruncate.

Answer 3

Here is a non-destructive, jQuery-binded and CSS-executed technique.

Considering this SCSS/LESS:

.collapsable {
  margin-bottom: 10px; /* your <p> margin-bottom */
  line-height: 20px; /* your <p> line-height */

  p {
    line-height: inherit;
    margin-bottom: inherit;

    &:last-child {
      margin-bottom: 0;    
    }
  }

  &.collapsed {
    position: relative;
    overflow: hidden;

    p {
      margin: 0;
    }

    .expand-link-container {
      position: absolute;
      bottom: 0; right: 0;
      display: block;

      line-height: inherit;
      padding: 0 2px 0 5px;

      background-color: #FFF;

      box-shadow: -5px 0 5px 0 white;
    }
  }

  .expand-link-container {
    display: none;
  }
}

And this jQuery:

function collapseHTML(shownLines, expanderLink){

  // Configuration
  var shownLines   = typeof(shownLines) === "undefined" ? 4 : shownLines,
      expanderLink = typeof(expanderLink) === "undefined" ? "[...]" : expanderLink;

  $('.collapsable').each(function(){

    // If current collapsable has already been collapsed once, skip
    if( $(this).find('.expand-link-container').length > 0 ) return false; 

    // Compute max-height from line-height and shownLines
    var lineHeight = $(this).find('p').first().css('line-height');
        maxHeight  = parseInt(lineHeight, 10) * shownLines;

    // If the current div needs collapsing
    if( $(this).height() > maxHeight) {

      $(this)
        // Collapse it
        .addClass('collapsed')
        .css('max-height', maxHeight)

        // Append expander link
        .find('p:first-child').append(
          '<div class="expand-link-container">' +
          '  <a href="#">' + expanderLink + '</a>' +
          '</div>')

        // Bind click to expander link
        .find('.expand-link-container a').click(function(e){
          e.preventDefault();
          $(this).closest('.collapsable')
            .removeClass('collapsed')
            .css('max-height', '');
        });

    }

  });

}

Calling collapseHTML() anywhere in your javascript will cause all div.collapse to collapse their HTML content.

Example in JSfiddle

Answer 4

I had used the Summary plugin before (http://plugins.learningjquery.com/summarize/index.html). However I do not know if it is available for the jQuery version that you are using.

Answer 5

You can use substr

Updated Fiddle - http://jsfiddle.net/GC2qC/1/

var ttext = $('span').text(); //Store value

$('span').text($('span').text().substr(0, 4)).append('...'); //Substring

$('body').on('click', 'span', function(){ //Display complete text
    $(this).text(ttext);
});