moxdev
9/22/2017 - 2:41 PM

jQuery Read More Dropdown

Quick and Dirty Read More dropdown with jQuery

  var read_more_expand = function(event) {
  event.preventDefault();

  var toShow = jQuery(this).next();

  if( jQuery(toShow).hasClass('active') ) {
    jQuery(toShow).removeClass('active');
    jQuery(this).html('Read More »');
  } else {
    jQuery(toShow).addClass('active');
    jQuery(this).html('Read Less »');
  }
};

jQuery('.read-more-btn').on('click', read_more_expand); 
  
  // CSS
    .read-more-dropdown {
      padding-top: 1em;
      opacity: 0;
      max-height: 0;
      font-size: 0;
      transition: .25s ease;
    }

    .read-more-dropdown.active {
      opacity: 1;
      font-size: inherit;
      max-height: 999em;
    }