CODEWITHSUNDEEP
jquery
kulan
kulan

Reputation: 1391

jQuery show() list elements as inline-block

I want to show 3 li first as inline-block then load more with the "Load more" link, also inline-block li elements. What I have now is here: http://jsfiddle.net/dvm3qskg/

The thing is I am using css("display", "inline-block") instead of show() because when I use show() my list elements are display:list-type and I want to use show() because I would like to add some animation to it. Any ideas on how can I achieve this?

Upvotes: 1

Views: 371

Answers (2)

max
max

Reputation: 8687

You can set inline-block to li elements in CSS (show and hide methods will remember this value):

CSS:

li {
  display: inline-block;
}
#myList li {
  display: none;
}
#loadMore {
  color: green;
  cursor: pointer;
}
#loadMore:hover {
  color: black;
}
#showLess {
  color: red;
  cursor: pointer;
}
#showLess:hover {
  color: black;
}

JS:

$(document).ready(function() {
  size_li = $("#myList li").size();
  x = 3;
  $('#myList li:lt(' + x + ')').show('500');
  $('#loadMore').click(function() {
    x = (x + 5 <= size_li) ? x + 5 : size_li;
    $('#myList li:lt(' + x + ')').show('500');
  });
  $('#showLess').click(function() {
    x = (x - 5 < 0) ? 3 : x - 5;
    $('#myList li').not(':lt(' + x + ')').hide('500');
  });
});

JSFIDDLE

Upvotes: 1

Sunil Kumar
Sunil Kumar

Reputation: 3242

You can use the faeIn and fadeOut effect for animation I have done by editing your script, refer below code:

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').fadeIn('slow').css("display","inline-block");
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').fadeIn('slow').css("display","inline-block");
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').fadeOut('slow').css("display","none");
    });
});

Hope it helps you. Happy coding :)

Upvotes: 1

Related Questions