Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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>