Filters

Dropdown and Tag Classes

Difficulty: advanced

Useful for filtering by discrete categories.

The dropdown contains filters that will hide any items that are filter targets but are not of the class specified by the filter.

<!--Begin of header-->
<div class="display-block mt-4">
  <div class="row">
    <div class="col-md-8 col-12">
      <label style="display:block;" for="filterSelect">Filter by:</label>
      <select class="btn btn-wvu-gray" name="filterSelect" id="filterSelect">
        <option value="filterTarget">All</option>
        <option value="Aerobic">Aerobic</option>
        <option value="Endurance">Endurance</option>
        <option value="Low-Impact">Low-Impact</option>
        <option value="Strength">Strength</option>
        <option value="Skill">Skill</option>
        <option value="Womens">Women's</option>
      </select>
      <button class="btn btn-wvu-gold" onclick="filter(document.getElementById('filterSelect').value)">Lets Go!</button>
    </div>
    <div class="col-md-4 col-12 text-md-right text-left mt-md-auto mt-3">
      <small id="counter">Displaying 1 of 1</small>
    </div>
  </div>
</div>
<!--End of header-->

<!--Begin of cards-->
<div class="col-lg-4 col-md-6 col-12 mb-3 filterTarget Skill Strength" style="">
  <div class="pt-1 bg-wvu-accent--light-blue shadow">
    <div class="container-clubsports card bg-white">
      <h2 class="h3">
        Archery
      </h2>
      <span>
        <strong>Contact:&nbsp;</strong>McKenzie Setler
        <div class="desktop">|</div>
      </span>
      <span>
        <strong>Contact&nbsp;Email:&nbsp;</strong>
        <a href="mailto:mrs0073@mix.wvu.edu">mrs0073@mix.wvu.edu</a>
        <br>
      </span>
      <span>
        <strong>Club&nbsp;Email:&nbsp;</strong>
        <a href="mailto:wvuarcheryteam@gmail.com">wvuarcheryteam@gmail.com</a>
      </span>
      <span>
        <strong>Website:</strong>
        <a href="https://wvuengage.wvu.edu/organization/wvuarcheryteam">WVU Archery</a>
      </span>
      <ul class="list-inline h3 py-2">
        <li class="list-inline-item">
          <a class="fab fa-instagram text-decoration-none" href="https://www.instagram.com/wvuarcheryteam/">
            <span class="sr-only">WVU Archery Instagram</span>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="fab fa-facebook text-decoration-none" href="https://www.facebook.com/wvuarchery/">
            <span class="sr-only">WVU Archery Facebook</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!--end of cards-->


  function filter(filter){
            var targets = document.getElementsByClassName("filterTarget");
            var query = document.getElementsByClassName(filter);
            var i;
            for(i=0; i < targets.length; i++){
                targets[i].style.display="none";
            }
            for(i=0; i < query.length; i++){
                query[i].style.display="";
            }
            document.getElementById("counter").innerHTML = "Displaying " + query.length + " of " + targets.length;
        }

Filter by:

Displaying 7 of 7