JSFiddle - React, Tailwind, and code Playground

by frank_o

HTML

<script src="https://rawgithub.com/bebraw/jquery.ellipsis/master/dist/jquery.ellipsis.min.js"></script>
<div class="article">
    <p>Topping jelly beans topping chocolate sugar plum ice cream candy canes cotton candy. Gummies sweet roll gingerbread unerdwear.com marzipan bear claw tart cupcake bonbon. Gingerbread sweet roll applicake candy. Cupcake tart sesame snaps topping pastry chocolate cake sweet roll powder.</p>
    <p>Bear claw dessert candy canes jelly beans wafer cheesecake. Lollipop cookie ice cream bear claw. Macaroon donut gummies soufflé. Chocolate bar lollipop cotton candy brownie gummi bears lollipop lemon drops pudding brownie. Lemon drops chocolate applicake bear claw cotton candy apple pie chupa chups toffee. Jelly toffee gummi bears. Cheesecake jujubes chocolate bar cookie. Jelly beans gingerbread soufflé bear claw biscuit chocolate pudding unerdwear.com.</p>
    <p>Candy canes cupcake muffin jelly chupa chups. Croissant cotton candy powder cheesecake applicake chocolate candy. Pastry bear claw bonbon cake gummies marshmallow danish caramels.</p>
    <p>Cake candy canes jujubes. Sugar plum donut gummies toffee. Toffee chupa chups bonbon. Liquorice marzipan chocolate cake sweet topping biscuit cake fruitcake. Dragée oat cake gummi bears chupa chups. Gummies chocolate bar dragée chupa chups gummi bears marshmallow.</p>
    </p>
</div>

CSS

.article {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    border-bottom: 2px solid #ccc;
}
.more {
background: blue;
color: white;
padding: 10px;
}

JavaScript

// http://css-tricks.com/text-fade-read-more/


    $.fn.truncate = function(container, maxHeight) {
      var totalHeight = 0,
        paragraph = container.find('p');

      container.css('max-height', maxHeight);

      paragraph.each(function() {
        totalHeight += $(this).outerHeight(true);
      });

      if(totalHeight > maxHeight) {
        container.append('<div class="fade_overlay"></div>');

        $('<a href="#" class="more">More</a>').insertAfter(container);
            
        var fadeOverlay = container.parent().find('.fade_overlay'),
          more = container.parent().find('.more'),
          duration = 100;
 
        // http://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions
        
        var oddClick = function(target) {
          target.one('click', function() {
            var target = $(this);

            target.css('height', container.height())
              .css('max-height', 9999);

            target.animate({
              'height': totalHeight
            });
 
            fadeOverlay.fadeOut(duration);
            more.fadeOut(duration);
  
            target.one('click', evenClick);
          });
        }

        var evenClick = function(target) {
          target.one('click', function() {
            var target = $(this);

            target.animate({
              'height': maxHeight
            });
  
            fadeOverlay.fadeIn(duration);
            more.fadeIn(duration);

            target.one('click', oddClick);
          });
        }

        oddClick(container);
        oddClick(more);
      }    
    }

$('.article').each(function () {
    $.fn.truncate($(this), 220);
});