Packery -- jquery show/hide работает, но не наоборот

У меня странная проблема с использованием Packery. Ниже мой код.

Если я переключаюсь с показа (по умолчанию), чтобы скрыть, когда я выбираю из раскрывающегося меню, он работает нормально.

Когда я скрываю его при загрузке и хочу показать класс, когда я выбираю из утопления, он НЕ работает. Он просто показывает мне последнюю картинку ВСЕГДА.

Кажется, я не могу понять, в чем проблема. Может ли кто-нибудь помочь?

<select id="DateFilter">
    <option selected>Choose Date</option>
    <option id="yesterday">yesterday</option>
    <option id="today">today</option>
</select>

<div id="container" class="js-packery" data-packery-options='{ "itemSelector": ".item", "gutter": 0 }'>
  <div class="yesterday">

    <div class="item">
      <figure><img src="pic1.jpg" width="100%"><figcaption>Pic 1</figcaption></figure>
    </div>

    <div class="item">
      <figure><img src="pic2.jpg" width="100%"><figcaption>Pic 2</figcaption></figure>
    </div>

    <div class="item">
      <figure><img src="pic3.jpg" width="100%"><figcaption>Pic 3</figcaption></figure>
    </div>

  </div>
</div>

<script>
    $(document).ready(function(){
      $(".yesterday").show();
      $("#DateFilter").change(function(){
        if($(this).find("option:selected").attr("id")=="yesterday"){
           $(".yesterday").hide();
        }
      });
   });
</script>