Jump to content

Edit History

redfordnl

redfordnl

This code worked for me

https://codepen.io/paulobrien/pen/JXrxBg

Very easy to implement

Step 1 --> Add class "truncate" to your div

<div class="truncate">

Step 2. --> Go to custom.js (somewhere in your theme folder on your webspace/FTP) and add the following code:

// requires jquery
$(document).ready(function() {
  (function() {
    var showChar = 400;
    var ellipsestext = "...";

    $(".truncate").each(function() {
      var content = $(this).html();
      if (content.length > showChar) {
        var c = content.substr(0, showChar);
        var h = content;
        var html =
          '<div class="truncate-text" style="display:block">' +
          c +
          '<span class="moreellipses">' +
          ellipsestext +
          '&nbsp;&nbsp;<a href="" class="moreless more">more</a></span></span></div><div class="truncate-text" style="display:none">' +
          h +
          '<a href="" class="moreless less">Less</a></span></div>';

        $(this).html(html);
      }
    });

    $(".moreless").click(function() {
      var thisEl = $(this);
      var cT = thisEl.closest(".truncate-text");
      var tX = ".truncate-text";

      if (thisEl.hasClass("less")) {
        cT.prev(tX).toggle();
        cT.slideToggle();
      } else {
        cT.toggle();
        cT.next(tX).fadeToggle();
      }
      return false;
    });
    /* end iffe */
  })();

  /* end ready */
});

You can change character length to whatever you need:

var showChar = 400;

Works like a charm on PS 8.X (so will work also for PS 1.7).

redfordnl

redfordnl

This code worked for me

https://codepen.io/paulobrien/pen/JXrxBg

Very easy to implement

Step 1 --> Add clas "truncate" to your div

<div class="truncate">

Step 2. --> Go to custom.js (somewhere in your theme folder on your webspace/FTP) and add the following code:

// requires jquery
$(document).ready(function() {
  (function() {
    var showChar = 400;
    var ellipsestext = "...";

    $(".truncate").each(function() {
      var content = $(this).html();
      if (content.length > showChar) {
        var c = content.substr(0, showChar);
        var h = content;
        var html =
          '<div class="truncate-text" style="display:block">' +
          c +
          '<span class="moreellipses">' +
          ellipsestext +
          '&nbsp;&nbsp;<a href="" class="moreless more">more</a></span></span></div><div class="truncate-text" style="display:none">' +
          h +
          '<a href="" class="moreless less">Less</a></span></div>';

        $(this).html(html);
      }
    });

    $(".moreless").click(function() {
      var thisEl = $(this);
      var cT = thisEl.closest(".truncate-text");
      var tX = ".truncate-text";

      if (thisEl.hasClass("less")) {
        cT.prev(tX).toggle();
        cT.slideToggle();
      } else {
        cT.toggle();
        cT.next(tX).fadeToggle();
      }
      return false;
    });
    /* end iffe */
  })();

  /* end ready */
});

You can change character length to whatever you need:

var showChar = 400;

Works like a charm on PS 8.X (so will work also for PS 1.7).

×
×
  • Create New...