julianmurillo
Gebruiker
- Lid geworden
- 15 jan 2018
- Berichten
- 41
Hi allemaal
Kennen jullie een manier om een 'Add more'-link toe te voegen aan een tekst die meer dan drie regels lang is?
Ik ben deze oplossing tegengekomen, maar deze houdt alleen rekening met een max. lengte van 100 karakters:
Kennen jullie een manier om een 'Add more'-link toe te voegen aan een tekst die meer dan drie regels lang is?
Ik ben deze oplossing tegengekomen, maar deze houdt alleen rekening met een max. lengte van 100 karakters:
Code:
(function($) {
$.fn.shorten = function (settings) {
var config = {
showChars: 100,
ellipsesText: "...",
moreText: "more",
lessText: "less"
};
if (settings) {
$.extend(config, settings);
}
$(document).off("click", '.morelink');
$(document).on({click: function () {
var $this = $(this);
if ($this.hasClass('less')) {
$this.removeClass('less');
$this.html(config.moreText);
} else {
$this.addClass('less');
$this.html(config.lessText);
}
$this.parent().prev().toggle();
$this.prev().toggle();
return false;
}
}, '.morelink');
return this.each(function () {
var $this = $(this);
if($this.hasClass("shortened")) return;
$this.addClass("shortened");
var content = $this.html();
if (content.length > config.showChars) {
var c = content.substr(0, config.showChars);
var h = content.substr(config.showChars, content.length - config.showChars);
var html = c + '<span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> <a href="#" class="morelink">' + config.moreText + '</a></span>';
$this.html(html);
$(".morecontent span").hide();
}
});
};
})(jQuery);