...
HTML |
---|
<style>
.morelink {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
position: relative;
margin-top: 20px;
font-size: 13px;
color: #ececec;
}
.morelink:after {
content: '';
-ms-flex-item-align: start;
align-self: flex-start;
display: inline-block;
width: 5px;
height: 5px;
margin-top: 6px;
margin-left: 10px;
border: 1px solid #ececec;
border-top: none;
border-right: none;
background: transparent;
transform: rotate(-45deg);
transform-origin: bottom;
}
.morelink.less:after {
margin-left: 7px;
transform: rotate(135deg);
}
</style>
<script>
function showHideText(sSelector, options) {
// Def. options
var defaults = {
charQty : 100,
ellipseText : "...",
moreText : "Show more",
lessText : "Show less"
};
var settings = AJS.$.extend( {}, defaults, options );
var s = this;
s.container = $(sSelector);
s.containerH = s.container.height();
s.container.each(function() {
var content = $(this).html();
if(content.length > settings.charQty) {
var visibleText = content.substr(0, settings.charQty);
var hiddenText = content.substr(settings.charQty, content.length - settings.charQty);
var html = visibleText
+ '<span class="moreellipses">' +
settings.ellipseText
+ '</span><span class="morecontent"><span>' +
hiddenText
+ '</span><a href="" class="morelink">' +
settings.moreText
+ '</a></span>';
$(this).html(html);
}
});
s.showHide = function(event) {
event.preventDefault();
if(AJS.$(this).hasClass("less")) {
AJS.$(this).removeClass("less");
AJS.$(this).html(settings.moreText);
AJS.$(this).prev().fadeToggle('fast', function() {
$(this).parent().prev().fadeIn();
});
} else {
AJS.$(this).addClass("less");
AJS.$(this).html(settings.lessText);
AJS.$(this).parent().prev().hide();
AJS.$(this).prev().fadeToggle('fast');
}
}
AJS.$(".morelink").bind('click', s.showHide);
}
/*------------------------------------------*/
new showHideText('[cf-field^="hugeta"]', {
charQty : 50
});
</script> |