load more in list end design code example

Example 1: using show more button show infinite content

.ioh_load_more_container {
  margin-top: 25px;
}

.ioh_load_more {
  cursor:pointer;
}

Example 2: using show more button show infinite content

/*Change infinite scroll into load more button */

  //prevent the infinite scroll from running with a hack 
  $('.um-activity-wall').attr('data-single_post', 'TRUE');

  //set up a function which inserts a load more button, and removes the animated gif
  function ioh_append_loadmore_btn() {
      var lastDiv = $('.um-activity-load:last');
      lastDiv.html('<div class="ioh_load_more btn btn-primary">Load more</div>');
      lastDiv.show();
      lastDiv.addClass('ioh_load_more_container');
      lastDiv.removeClass('um-activity-load');
  }
  ioh_append_loadmore_btn();

  //add an event listener to the added load more button, which executes the loading. 
  $(document).on('click', '.ioh_load_more', function() {
      var wall = jQuery('.um-activity-wall');
      if ( wall.length > 0
          && jQuery(window).scrollTop() + jQuery(window).height() >= wall.offset().top + wall.height()
          // && jQuery('.um-activity-widget:not(.um-activity-new-post):visible').length >= jQuery('.um-activity-wall').attr('data-per_page')
          && Loadwall_ajax === false) {

          Loadwall_ajax = true;
          var lastDiv = $('.ioh_load_more_container:last');
          lastDiv.addClass('um-activity-load');

          jQuery.ajax({
              url: wp.ajax.settings.url,
              type: 'post',
              data: {
                  action: 'um_activity_load_wall',
                  offset: jQuery('.um-activity-widget:not(.um-activity-new-post):visible').length,
                  user_id:  wall.data('user_id'),
                  user_wall: wall.data( 'user_wall' ),
                  hashtag: wall.data('hashtag'),
                  nonce: um_scripts.nonce
              },
              success: function( data ) {
                  jQuery('.um-activity-load').hide();

                  if ( data === '' ) {
                      Loadwall_ajax = true;
                  } else {
                      jQuery('.um-activity-wall').append( data );
                      Loadwall_ajax = false;
                  }

                  ioh_append_loadmore_btn();

              },
              error: function (e) {
                  console.log('UM Social Activity Error', e);
              }
          });
      }

  });