JSFiddle - React, Tailwind, and code Playground

by thomas_david88

HTML

<select id="ddlViewBy">
  <option value="1">all</option>
  <option value="1">image</option>
  <option value="2">video</option>
  <option value="3">pdf</option>
</select>
<div class="full-image" data-id="2" data-date="2019-02-19" data-image="jpg">1<img src="" />
</div>
<div class="full-image" data-id="3"  data-date="2019-03-19" data-image="png">2<img src="" />
</div>
<div class="full-image" data-id="4" data-date="2019-05-19" data-image="jpg">3<img src="" />
</div>
<div class="full-image" data-id="5" data-date="2019-08-19" data-image="mp4">video 1<img src="" />
</div>
<div class="full-image" data-id="5" data-date="2018-02-19" data-image="mp4">video 2<img src="" />
</div>
<div class="full-image" data-id="6" data-date="2017-02-19" data-image="gif">5<img src="" />
</div>
<div class="full-image" data-id="7" data-date="2016-02-19" data-image="pdf">pdf<img src="" />
</div>

CSS

.show {
  display: block;
}

.hidden {
  display: none;
}

JavaScript

const ext = ["jpg", "gif", "png", "jpeg"];
const extvideo = ["mp4", "ogv"];
const extpdf = ["pdf"];
$("#ddlViewBy").on("change", function(e) {
  var name = $("#ddlViewBy option:selected").text();
  const divs = document.querySelectorAll('.full-image');
  divs.forEach(div => {
    div.classList.remove('hidden');
  });
  if (name == "image") {
    divs.forEach(div => {
      const className = ext.includes(div.dataset['image']) ? "show" : "hidden";
      div.classList.add(className);
    });
  }
  if (name == "video") {
    divs.forEach(div => {
      const className = extvideo.includes(div.dataset['image']) ? "show" : "hidden";
      div.classList.add(className);
    });
  }
  if (name == "pdf") {
    divs.forEach(div => {
      const className = extpdf.includes(div.dataset['image']) ? "show" : "hidden";
      div.classList.add(className);
    });
  }
});