CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mohan
Mohan

Reputation: 289

Jquery show hide not working as expected?

I have below HTML structure and i need to show / Hide the filter elements. My Use case is, On page load each filter group should be restricted to 3 filter elements with option to expand more on click of + button. Same has to be done to show only top 3 filter elements on click of - button. For Ex. I have size as filter group and filter elements as S, M, L, XL, XXL. I want to show only 3 elements on page load and rest to has to be hidden. On click of + button all the elements should be displayed. On click of - button, only top 3 elements to be displayed(S,M,L). Below are the code sample and Jquery which i have tried but it is not coming.

$(document).ready(function() {
  $(".showLess").hide();
  // used to hide elements which are > 3 in numbers
  $('.list-group-item label:lt(3)').next().hide();
  // On click of + button need to show rest of the filter elements
  $('.loadMore').click(function() {
    $(".showLess").show();
    $('.list-group-item label:lt(5)').next().show();
  });
  // On click of - button need to show only top 3 filter elements
  $('.showLess').click(function() {
    $(".showLess").hide();
    $('.list-group-item label').closest().not(':lt(3)').hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
  <a class="list-group-item fltrHdng">Size</a> 
  <div class="list-group-item">
    <div id="filter-group10" class="cf">

      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="59">S
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="60">M
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">L
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">XL
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">XXL
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more" style="display: inline-block;">-</button>
    </div>
  </div>
  <a class="list-group-item fltrHdng">FABRIC</a> 
  <div class="list-group-item">
    <div id="filter-group21" class="cf">
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="144">Chiffon
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="145">Corduroy
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Cotton
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Wool
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Silk
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more" style="display: inline-block;">-</button>

    </div>
  </div>
</div>

Upvotes: 0

Views: 683

Answers (3)

user6514731
user6514731

Reputation: 

$(document).ready(function() {
        $(".showLess").hide();
        // used to hide elements which are > 3 in numbers
        $('.list-group-item').each(function(){
            $(this).find('label :gt(2)').hide();
        })
        // On click of + button need to show rest of the filter elements
        $('.loadMore').click(function() {
            $(this).next().show();
            //$(this).hide();
            $(this).next().show();
            $(this).parent().find('label').show();
        });
        // On click of - button need to show only top 3 filter elements
        $('.showLess').click(function() {
            $(this).hide();
            $(this).parent().find('label').not(':lt(3)').hide();
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
    <a class="list-group-item fltrHdng">Size</a>
    <div class="list-group-item">
        <div id="filter-group10" class="cf">

            <label class="checkbox cb_test">
                <input name="filter[]" type="checkbox" value="59">S
            </label>
            <label class="checkbox cb_test" style="display: block;">
                <input name="filter[]" type="checkbox" value="60">M
            </label>
            <label class="checkbox cb_test" style="display: block;">
                <input name="filter[]" type="checkbox" value="61">L
            </label>
            <label class="checkbox cb_test" style="display: block;">
                <input name="filter[]" type="checkbox" value="61">XL
            </label>
            <label class="checkbox cb_test" style="display: block;">
                <input name="filter[]" type="checkbox" value="61">XXL
            </label>
            <button class="loadMore" title="Load more">+</button>
            <button class="showLess" title="Load more" style="display: inline-block;">-</button>
        </div>
    </div>
    <a class="list-group-item fltrHdng">FABRIC</a>
    <div class="list-group-item">
        <div id="filter-group21" class="cf">
            <label class="checkbox cb_test">
                <input name="filter[]" type="checkbox" value="144">Chiffon
            </label>
            <label class="checkbox cb_test">
                <input name="filter[]" type="checkbox" value="145">Corduroy
            </label>
            <label class="checkbox cb_test">
                <input name="filter[]" type="checkbox" value="146">Cotton
            </label>
            <label class="checkbox cb_test">
                <input name="filter[]" type="checkbox" value="146">Wool
            </label>
            <label class="checkbox cb_test">
                <input name="filter[]" type="checkbox" value="146">Silk
            </label>
            <button class="loadMore" title="Load more">+</button>
            <button class="showLess" title="Load more" style="display: inline-block;">-</button>

        </div>
    </div>
</div>

Upvotes: 0

Parvez Rahaman
Parvez Rahaman

Reputation: 4387

Find within parent and slice the number you want to show or hide and then show/hide.

  $(".showLess").hide();
  $('.cf').each(function() {
    $(this).find('.checkbox').slice(3).hide();
  })
  $('.loadMore').on('click', function() {
    $(this).hide().next().show();
    $(this).parent().find('.checkbox').show();
  })
  $('.showLess').on('click', function() {
    $(this).hide();
    $(this).prev().show();
    $(this).parent().find('.checkbox').slice(3).hide();
  })


$(document).ready(function() {
  $(".showLess").hide();
  $('.cf').each(function() {
    $(this).find('.checkbox').slice(3).hide();
  })
  $('.loadMore').on('click', function() {
    $(this).hide().next().show();
    $(this).parent().find('.checkbox').show();
  })
  $('.showLess').on('click', function() {
    $(this).hide();
    $(this).prev().show();
    $(this).parent().find('.checkbox').slice(3).hide();
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
  <a class="list-group-item fltrHdng">Size</a> 
  <div class="list-group-item">
    <div id="filter-group10" class="cf">

      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="59">S
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="60">M
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">L
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">XL
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">XXL
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more" style="display: inline-block;">-</button>
    </div>
  </div>
  <a class="list-group-item fltrHdng">FABRIC</a> 
  <div class="list-group-item">
    <div id="filter-group21" class="cf">
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="144">Chiffon
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="145">Corduroy
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Cotton
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Wool
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Silk
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more" style="display: inline-block;">-</button>

    </div>
  </div>
</div>

Upvotes: 0

epascarello
epascarello

Reputation: 207501

First issue, you are calling $(".showLess").show(); so it is selecting all of the elements with the showLess class. You do the same thing with the list. Instead of doing all this logic in the JavaScript, you can do it in CSS with adding and removing a class.

$(document).ready(function() {
  
  $('.loadMore, .showLess').click(function() {
    var btn = $(this);
    var isMore = btn.hasClass("loadMore")
    btn.closest(".list-group-item").toggleClass("active", isMore);
  });

  
});
.showLess {
   display: none;  
}
.list-group-item > div > label {
    display: block;
}
.list-group-item > div > label:nth-of-type(1n+3) {
  display: none;
}


.list-group-item.active .showLess {
  display: block;
}
.list-group-item.active .loadMore {
  display: none;
}
.list-group-item.active > div > label:nth-of-type(1n+3) {
  display: block;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
  <a class="list-group-item fltrHdng">Size</a> 
  <div class="list-group-item">
    <div id="filter-group10" class="cf">

      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="59">S
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="60">M
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="61">L
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="61">XL
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="61">XXL
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>
  <a class="list-group-item fltrHdng">FABRIC</a> 
  <div class="list-group-item">
    <div id="filter-group21" class="cf">
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="144">Chiffon
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="145">Corduroy
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Cotton
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Wool
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Silk
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>

    </div>
  </div>
</div>

If you really want to do it with JavaScript, your code would need to be something like this (untested)

$('.loadMore').click(function() {
    var btn = $(this);
    btn.siblings(".showLess").show();
    btn.hide();
    btn.parent().find("label").show();
  });
  // On click of - button need to show only top 3 filter elements
  $('.showLess').click(function() {
    var btn = $(this);
    btn.siblings(".loadMore").show();
    btn.hide();
    btn.parent().find("label:gt(3)").hide();
  });

Upvotes: 0

Related Questions