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: </strong>McKenzie Setler
<div class="desktop">|</div>
</span>
<span>
<strong>Contact Email: </strong>
<a href="mailto:mrs0073@mix.wvu.edu">mrs0073@mix.wvu.edu</a>
<br>
</span>
<span>
<strong>Club Email: </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;
}
Displaying 7 of 7
Strong Archery
Contact: Alaina Smith|
Contact Email:
ams0004@mix.wvu.edu
Club Email: wvuarcheryteam@gmail.com Website: WVU Archery
Aerobic Archery
Contact: Alaina Smith|
Contact Email:
ams0004@mix.wvu.edu
Club Email: wvuarcheryteam@gmail.com Website: WVU Archery
Low-Impact Archery
Contact: Alaina Smith|
Contact Email:
ams0004@mix.wvu.edu
Club Email: wvuarcheryteam@gmail.com Website: WVU Archery
Endurance Archery
Contact: Alaina Smith|
Contact Email:
ams0004@mix.wvu.edu
Club Email: wvuarcheryteam@gmail.com Website: WVU Archery
Skill Archery
Contact: Alaina Smith|
Contact Email:
ams0004@mix.wvu.edu
Club Email: wvuarcheryteam@gmail.com Website: WVU Archery
Womens Archery
Contact: Alaina Smith|
Contact Email:
ams0004@mix.wvu.edu
Club Email: wvuarcheryteam@gmail.com Website: WVU Archery
Strong Skill Archery
Contact: Alaina Smith|
Contact Email:
ams0004@mix.wvu.edu
Club Email: wvuarcheryteam@gmail.com Website: WVU Archery