Load More / Show Less issues using jquery


Tags: javascript,jquery,html,css

Problem :

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



Solution :

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


    CSS Howto..

    How do I solve this IE7 margin issue?

    How to position a background image in reveal.js?

    How to make the divider between two tbody elements moveable

    How to dynamically create CSS class in IE8

    How to have choices that change the background of a site

    Show 100% of background

    How do I make these buttons stay activated after clicking on them?

    How to truly align center of two elemnts with css?

    how to select :after element using jquery

    how to make the img at the left side and the texts at the right side vertically line up

    how i can change the CSS class on click of an element [closed]

    How to position an image list marker so that the text is vertically centered

    How to theme elgg with HTML and CSS only? [closed]

    How to override xhtml theme css?

    Creating “columns” inside a DIV: how to place them?

    Floating divs, different height, building from left to right. how to fill vertical gaps between levels?

    How to create a cross with pure css [duplicate]

    How Do I Reduce the Padding Around a Chart Within an Article

    how the highlighted text color and background is determined

    How can I achieve the mouseover effect like on wikipedia?

    How to override display: table cell

    how to activate the functions of a div in css after focusing in a textbox in asp.net?

    How to apply Javascript conditionally on a specific css-class only?

    How to add your customise arrows in slick slider JS using CSS

    How to control multiple images for a single background definition

    How to style a list of links with CSS?

    How to show the vertical image into horizontal manner using HTML and CSS?

    How center an absolute element (img) that's wider than its parent div?

    How do I align elements using CSS?

    How to write media queries for HD/Retina Display in Landscape position?