MyListing Club

Description Field Read More Toggle

Building better MyListing websites. One code snippet at a time.

Overview

The Description Field Read More Toggle code snippet allows for greater control of how Single Listings display info within a MyListing website.

Let’s say you have a Single Listing that has a ton of information in the Description field. Rather than displaying all of that information at once, this snippet allows users to choose when they would like to see all of the information.

This snippet will add a Read More toggle to the description field once the character count exceeds 200 characters.

Implementation

  1. Grab the code snippet.
  2. Follow the provided instructions.
  3. Save your changes.
				
					//// INSTRUCTIONS: 
//// Copy and paste the code snippet below into Theme Tools > Theme Options > Custom Code > JavaScript.

//// NOTES:
//// This snippet will add a Read More toggle to the description field once the character count exceeds 200 characters.

--------------------------- CODE SNIPPET IS BELOW THIS LINE --------------------------- 

// TOGGLE READ MORE READ LESS - DESCRIPTION FIELD
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);
});