Load More / Show Less issues using jquery

Question

Question(s): Provided below, I am encountering a few issues, they are:

1.) where $('.resume_container_item:lt(' + x + ')').show(); is located, it is only showing the first 4 items in the first container - it should show the first 4 items in all containers.

2.) the if statement here

if (x == size_item) { // ISSUE LIES HERE - For some reason, it does not want to fade out once reached...
    $('.resume_view_more').fadeOut(250);
}

=========================================================================

As for the css, I have the .resume_container_item and the .resume_show_less classes as display: none;

Here is the full code:

size_item = $('.resume_container_item').size();
x = 4;
$('.resume_container').each(function( index ) {
  $(this).children('.resume_container_item:lt(' + x + ')').show(); 
}); // Fixed with help from n01ze
$('.resume_view_more').click(function() {
  var $parent = $(this).parent();
  x = (x + 4 <= size_item) ? x + 4 : size_item;
  $parent.find('.resume_container_item:lt(' + x + ')').slideDown();
  $parent.find('.resume_show_less').fadeIn(500);
  if (x == size_item) { // ISSUE LIES HERE - For some reason, it does not want to fade out once reached...
    $('.resume_view_more').fadeOut(250);
  }
  return false;
});
$('.resume_show_less').click(function() {
  var $parent = $(this).parent();
  x = (x - 4 < 4) ? 4 : x - 4;
  $parent.find('.resume_container_item').not(':lt(' + x + ')').slideUp();
  $parent.find('.resume_view_more').fadeIn(500);
  if (x == 4) {
    $('.resume_show_less').fadeOut(250);
  }
  return false;
});

Any suggestions and/or thoughts on how to correct this is greatly appreciated...I've been at this for hours and can't seem to figure out why this is occurring...

UPDATE:

Here is a jsFiddle

UPDATE 2:

jsFiddle

With this update, issue #1 has been corrected with the help of n01ze

Answer 1

Try this , to load 4 items in each container,

//$('.resume_container_item:lt(' + x + ')').show();  //Comment this line

$('.resume_container').each(function( index ) {
  $( this ).children('.resume_container_item:lt(' + x + ')').show(); 
});

Edit 2 : for point 2

use inside your loop

$('.resume_view_more').click(function() {
  var $parent = $(this).parent();
  size_item = $parent.children('.resume_container_item').size(); //This will fix it

..... rest codes

$parent.children('.resume_view_more').fadeOut(250); //Try this to hide specific link

FINAL CODE

$(document).ready(function () {
/*!
 *  Author: Michael R. Draemel
 *          http://draemel.com/
 */

size_item = $('.resume_container_item').size();
x = 4;
//$('.resume_container_item:lt(' + x + ')').show(); // ISSUE LIES HERE - Need to figure out how to show first 4 items in each container
$('.resume_container').each(function( index ) {
  $( this ).children('.resume_container_item:lt(' + x + ')').show();
  var chld_size = $(this).children('.resume_container_item').size();

  if(chld_size <= x) {
   $(this).children('.resume_view_more').hide();
   $(this).children('.resume_show_less').hide();
  }
});
$('.resume_view_more').click(function() {
  var $parent = $(this).parent();
  size_item = $parent.children('.resume_container_item').size(); //This will fix it
  x = (x + 4 <= size_item) ? x + 4 : size_item;
  $parent.find('.resume_container_item:lt(' + x + ')').slideDown();
  $parent.find('.resume_show_less').fadeIn(500);
  if (x == size_item) { // ISSUE LIES HERE - For some reason, it does not want to fade out once reached...
    $parent.children('.resume_view_more').fadeOut(250);
  }
  return false;
});
$('.resume_show_less').click(function() {
  var $parent = $(this).parent();
  size_item = $parent.children('.resume_container_item').size(); //This will fix it
  x = (x - 4 < 4) ? 4 : x - 4;
  $parent.find('.resume_container_item').not(':lt(' + x + ')').slideUp();
  $parent.find('.resume_view_more').fadeIn(500);
  if (x == 4) {
   // $('.resume_show_less').fadeOut(250);
   $parent.children('.resume_show_less').fadeOut(250);
  }
  return false;
});

});

Answer 2

The error in the second fiddle occurs because you rely on a single variable x to handle two different counters.

You can check how many items you are showing by counting :visible elements within the container

$('.resume_view_more').click(function() {
  var $parent = $(this).parent();
  var size_item = $parent.children('.resume_container_item').size();
  var tmp_x = $parent.children('.resume_container_item:visible').size();
  tmp_x = (tmp_x + 4 <= size_item) ? tmp_x + 4 : size_item;
  $parent.find('.resume_container_item:lt(' + tmp_x + ')').slideDown();
  $parent.find('.resume_show_less').fadeIn(500);
  if (tmp_x == size_item) { 
    $parent.children('.resume_view_more').fadeOut(250);
  }
  return false;
});

Fiddle here