Get Started

How to Add a “Read More/Less” Toggle to Your MyListing Description Field

Enhance your MyListing website’s single listings with the Description Field Read More Toggle code snippet. This snippet provides greater control over displaying extensive information in the description field, allowing users to choose when to view full details. Easily add a “Read More/Less” toggle that activates when the description exceeds 200 characters, improving user experience and site aesthetics.


/**
 * Author: MyListing Club
 * Author URI: https://mylisting.club
 */

jQuery(document).ready(function($) {
    setTimeout(function() {
          var desc = $('body.single-listing .block-field-job_description .content-block');
          var collapsed_height = 200; // in px;

          if ( ! desc.length || desc.outerHeight() <= collapsed_height ) {
              return;
          }

          desc.find('.pf-body').css( { height: collapsed_height + 'px', overflow: 'hidden' } );
          desc.append('<a href="#" class="toggle-more">Read More</a>').click( function(e) {
              e.preventDefault();

              if ( desc.hasClass('toggled') ) {
                  desc.removeClass('toggled');
                  desc.find('.pf-body').css( 'height', collapsed_height + 'px' );
                  desc.find('.toggle-more').text('Read More');
              } else {
                  desc.addClass('toggled');
                  desc.find('.pf-body').css( 'height', 'auto' );
                  desc.find('.toggle-more').text('Read Less');
              }
          });
    }, 1000);
});