CODEWITHSUNDEEP
javascriptjqueryhtml
Sathish
Sathish

Reputation: 2460

JQuery hide() not working after fadeIn()

Initial stage I showed first five li then click a more categories I want to show next 5 li(with fadin() effects), it will continue depends on categories count

But I facing a problem is hide() not working after fadeIn(), its shows all li.

What I need is, when page load I need to show first 5 categories, then click a more categories will show next 5(with fadein effects).

Here is working fiddle

var items = jQuery("ul.main-category-grid > li");
var numItems = items.length;
$showPerClick = 5;
items.slice($showPerClick).hide();
jQuery('.dft-mre-btn > a').on('click', function(e){
  e.preventDefault();
  //   items.show();
  items.show().fadeOut().fadeIn(3000);// when use this line hide() not working
  $showPerClick = 5 + $showPerClick;
  items.slice($showPerClick).hide();
  show_btn_hide();
});

function show_btn_hide(){
  if($showPerClick >= numItems){
    jQuery('.dft-mre-btn').hide();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-category-grid">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ul>
<div class="dft-mre-btn">
  <a href="">More Catgeories</a>
</div>

I would appreciate any help, thanks in advance.

Upvotes: 0

Views: 104

Answers (2)

Sawyer
Sawyer

Reputation: 574

I have update your fiddle

http://jsfiddle.net/6q1amzbf/7/

var ul = $("ul.main-category-grid");
var numItems = ul.children('li').length;
var showPerClick = 4;
var items = ul.children('li:gt(' + showPerClick + ')');
items.hide();

// init
// items.(':gt(' + showPerClick + ')').hide();

$('.dft-mre-btn > a').on('click', function(e){
    e.preventDefault();
    var showItems = ul.children('li:lt(' + (showPerClick + 5) + '):gt(' + showPerClick + ')');
    showItems.fadeIn(3000);
    showPerClick += 5;
    if (showPerClick >= numItems) {
        $('.dft-mre-btn').hide();
    }
});

Upvotes: 1

Amit
Amit

Reputation: 46323

It's hard to exactly tell what you want, but if you want to fade in 5 items at a time, try like this:

var items = jQuery("ul.main-category-grid > li");
var numItems = items.length;
var $showPerClick = 5;
items.slice($showPerClick).hide();
jQuery('.dft-mre-btn > a').on('click', function (e) {
  e.preventDefault();

  var next = Math.min(numItems, 5 + $showPerClick);
  items.slice($showPerClick, next).fadeIn(3000);
  $showPerClick = next;

  show_btn_hide();
});

function show_btn_hide() {
  if ($showPerClick >= numItems) {
    jQuery('.dft-mre-btn').hide();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-category-grid">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ul>
<div class="dft-mre-btn">
  <a href="">More Catgeories</a>
</div>

working fiddle.

Upvotes: 4

Related Questions