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 to set fixed base to calculate vh unit in css on mobile?

    How to break up long words but leave out short ones?

    LESS: how to use dumpLineNumbers

    Extend page content in height or show white background under content

    How do I use css transitions to scale an image and move it at the same time?

    How do I keep my footer text from appearing outside my footer

    How to create a border with spaces in it [duplicate]

    How can I set up my menu to slide out, only when the header is hovered on?

    ASP.NET MVC: How do other people apply conditional CSS classes?

    How to change order of table td for responsive?

    How to adjust height based on content css

    How to avoid css transformation(rotate) when removing class?

    html - how to make images stay on certain part of background

    How to center this input using css only

    How to CSS pairs of DIV text left/right of center

    How to use CSS to make an input fields behaves like a button click?

    How to disable [marquee] tag with CSS? Is this possible?

    How to draw error icon with css only,exactly like in the image

    CSS & Button: How to override native CSS of html buttons element?

    How to center images in div

    on hover and on click how to fade out image and fade in content text

    How to make div css background hover

    Yet another person asking how to center a navigation bar

    How to make div to expand vertically without using overflow or javascript or hardcoded values such as margins

    how to vertically align div opposite to each other

    How to line up the bottom of side-by-side Div layers in CSS

    How to highlight 3 line toggle button when i hover?

    How to set MenuItem to corrent width in asp.net

    attaching div to a specific element for showing with javascript

    How can I expand this tag?