CODEWITHSUNDEEP
javascriptjquery
Jonell
Jonell

Reputation: 95

jQuery having one button in multiple lists hiding/showing items

I'm trying to make a button for my webshop filters. There are multiple 'categories' in one filter. One category will never display more than 5 items, no matter how many there are.

The button I need will allow the user to display more than the default of 5 items per category. In other words, if there are 7 items in the given category only 5 will be shown. The remaining 2 will be hidden. When the button is clicked all 7 items will be shown.

I've tried to do this but when I press the button it will show the items of the other categories as well..

var count = $('.block-layered-nav .block-content dl dd ul li').length;

if (count > 5) {
  $('.showmore').show();
  $('.block-layered-nav .block-content dl dd ul li:gt(4)').hide();
} else {
  $('.showmore').hide();
}

$('.showmore').on('click', function(e) {
  $(".block-layered-nav .block-content dl dd ul li:gt(4)").toggle().parent();
  alert(myparent('li'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="block block-layered-nav block-layered-nav--no-filters">
<div class="block-content toggle-content">
  <dl id="narrow-by-list">
    <dt>Wat</dt>
    <dd>
      <ul>
        <li class="list-group-item"><span>Moi1</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi2</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
      </ul>
      <button onclick="" class="showmore">
          Laat meer zien
      </button>
    </dd>
    <dt>Uitstraling</dt>
    <dd>
      <ul>
        <li class="list-group-item"><span>Moi4</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi5</span><a href="#">Hout</a></li>
      </ul>
      <button onclick="" class="showmore">
    Laat meer zien
  </button>
    </dd>
    <dt>Glans</dt>
    <dd>
      <ul>
        <li class="list-group-item"><span>Moi6</span><a href="#">Hout</a></li>
        <li class="list-group-item"><span>Moi7</span><a href="#">Hout</a></li>
      </ul>
      <button onclick="" class="showmore">
          Laat meer zien
       </button>
    </dd>
  </dl>
</div>
</div>

Upvotes: 2

Views: 391

Answers (2)

mplungjan
mplungjan

Reputation: 177786

I would consider this:

$('.showmore').each(function() { 
  var $parent = $(this).closest("dd"),
         $lis = $parent.find("li"),
         len  = $lis.length;
  $parent.find("li:gt(4)").hide(); // or something cleverer perhaps using eq
  $(this).toggle(len);
}).on("click",function() { 
  $(this).siblings("ul").children('li:gt(4)').toggle();
});

Upvotes: 0

Laurens Swart
Laurens Swart

Reputation: 1249

Fellow Dutchmen here, working on something with wood hm? Haha.

The problem is the following: you're counting ALL your li's in all your ul's and adding them up into one variable count. What you'll have to do is, for each ul count how many li's there are in it, and if it's more than 5, ONLY add a show more button under that very ul (right now, you're adding show more buttons everywhere if one of the lists contains 5 items or more). I fixed your code for you. Hope it helps! https://jsfiddle.net/admn32oe/12/

Veel succes verder! :-)

$('.block-layered-nav .block-content dl dd ul').each( function () {

  var count = $(this).children('li').length;

  if (count > 5) {
    $(this).next('.showmore').show();
    $(this).find('li:gt(4)').hide();
  } else {
    $(this).next('.showmore').hide();
  }

}); 

$('.showmore').on('click', function(e) {
    $(this).siblings("ul").children('li:gt(4)').toggle().parent();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block block-layered-nav block-layered-nav--no-filters">
  <div class="block-content toggle-content">
    <dl id="narrow-by-list">
      <dt>Wat</dt>
      <dd>
        <ul>
          <li class="list-group-item"><span>Moi1</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi2</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li>

        </ul>
         <button onclick="" class="showmore">
            Laat meer zien
        </button>
      </dd>
      <dt>Uitstraling</dt>
       <dd>
        <ul>
          <li class="list-group-item"><span>Moi4</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi5</span><a href="#">Hout</a></li>
        </ul>
            <button onclick="" class="showmore">
      Laat meer zien
    </button>
      </dd>
      <dt>Glans</dt>
       <dd>
        <ul>
          <li class="list-group-item"><span>Moi6</span><a href="#">Hout</a></li>
          <li class="list-group-item"><span>Moi7</span><a href="#">Hout</a></li>
        </ul>
         <button onclick="" class="showmore">
            Laat meer zien
         </button>
      </dd>
    </dl>
  </div>
</div>

Upvotes: 1

Related Questions