...
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); } /*------------------------------------------*/ AJS.toInit(function() { new showHideText('span[cf-field^="hugeta"]', { charQty : 50 }); }); </script> |