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 + ' <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).