CODEWITHSUNDEEP
javascriptjquery
zazvorniki
zazvorniki

Reputation: 3602

Showing and hiding items with show more and show less buttons

I'm trying to create a system for a photo section of my website that has a show more and hide less function, but I seem to be having a bit of trouble. I've created a fiddle here so you can see exactly what I'm talking about.

Basically, I would like ten images the show on load (this is not happening) and then be able to show ten more and then have another button that would hide ten of them.

There seems to be something happening with my incrementing though. On load all the images are showing and when I hit show less then they all disappear. I can then add or remove ten, but when there happens to be an uneven number of images it breaks and will hide or show more then is needed. Does that make sense?

My js looks like this. Any help would be wonderful!

 size_li = $(".imgLinks li").size();
      x=10;
      $('.imgLinks li:lt('+x+')').show();
      $('.show_button').click(function () {
          x= (x+10 <= size_li) ? x+10 : size_li;
          $('.imgLinks li:lt('+x+')').show();
           $('.hide_button').show();
          if(x == size_li){
              $('.show_button').hide();
          }
      });
      $('.hide_button').click(function () {
          x=(x-10<0) ? 10 : x-10;
          $('.imgLinks li').not(':lt('+x+')').hide();
          $('.show_button').show();
           $('.hide_button').show();
          if(x == 10){
              $('.hide_button').hide();
          }
      });

Upvotes: 0

Views: 838

Answers (3)

melc
melc

Reputation: 11671

If you hide all images and the hide button initially, your js code will show first ten and everything seems fine. Add the following in your css code,

.imgLinks li, .hide_button{
    display:none;
}

http://jsfiddle.net/SrK88/8/

or add these two lines at the top of your js,

$(".imgLinks li").hide();
$(".hide_button").hide();

http://jsfiddle.net/SrK88/9

EDIT

For the even/uneven issue modify the code for hiding as so,

$('.hide_button').click(function () {
        x = (x - 10 < 0) ? 10 : (x%10!=0?x-(x%10):x - 10);
        $('.imgLinks li').not(':lt(' + x + ')').hide();
        $('.show_button').show();
        $('.hide_button').show();
        if (x == 10) {
            $('.hide_button').hide();
        }
    });

http://jsfiddle.net/SrK88/24/

Upvotes: 2

monastic-panic
monastic-panic

Reputation: 3997

Ok how about this http://jsfiddle.net/SrK88/21/

UPDATE chagned the code to handle uneven amounts using the % operator: http://jsfiddle.net/SrK88/23/

First your images were all visible because you never hide them to begin with.

in your size bit I changed it to var size_li = $(".imgLinks li").hide().size();

the rest I would be happy to explain if it isn';t clear from the example

It seemed overly complicated to internally track where you were in the showing/hiding so instead I just look at the visible <li>'s and check whether you can show or hide more

Upvotes: 0

adam
adam

Reputation: 238

Maybe you can follow this example. Basically it's slicing 2 items instead of 10. It uses css to hide all li starting from the 3rd li inside ul.

Upvotes: 0

Related Questions