Cacher is the code snippet organizer for pro developers

<div id="video-library">
    <div class="filter">
        <div class="filter-1">
            <h3>Filter by Instructor</h3>
            <select name="" id="instructor-filter" onChange="theFilter()">
                <option value="--">--</option>
                {% assign instr = List.Items | Uniq: "FieldValues.InstructorName" | OrderBy:'FieldValues.InstructorName','asc' %}
                {% for Item in instr  -%}
                <option value="{{ Item.FieldValues.InstructorName }}">{{ Item.FieldValues.InstructorName }}</option>
                {% endfor -%}
            </select>
        </div>
        <div class="filter-2">
            <h3>Filter by Category</h3>
            <select name="" id="category-filter" onChange="theFilter()">
                <option value="--">--</option>
                <option value="AS">AS</option>
                <option value="FV">FV</option>
                <option value="GL">GL</option>
                <option value="NO">NO</option>
                <option value="OP">OP</option>
                <option value="PD">PD</option>
                <option value="SD">SD</option>
            </select>
        </div>
    </div>
    <ul class="grid">
        {% assign sorted = List.Items %}
        {% for Item in sorted -%}
        <li class="item filtered">
            <div class="vid-container"><iframe
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
                    frameborder="0" src="{{ Item.FieldValues.YoutubeLink }}" frameborder="0"></iframe></div>
            <div class="info">
                <span class="expand-info"></span>
                <p class="c-name"><b>{{ Item.FieldValues.CourseName }}</b></p>
                <p class="i-name">{{ Item.FieldValues.InstructorName }}</p>
                <div class="description">
                    <span class="course-id">COPE ID: {{ Item.FieldValues.CourseId }}</span>
                    <span>Time: {{ Item.FieldValues.CourseTime }}</span>
                    <span>Cost: {{ Item.FieldValues.CourseCost }}</span>
                    <p>{{ Item.FieldValues.CourseDescription }}</p>
                </div>
            </div>
        </li>
        {% endfor -%}
</div>

#video-library {
	.filter {
		margin: 5rem auto;
		text-align: center;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		> div {
			flex-basis: 48%;
			max-width: 350px;
			margin: 10px;
			select {
				width: 100%;
				height: 50px;
				outline: none;
				font-size: 14px;
			}
		}
	}
	ul.grid {
		padding-left: 0;
		list-style: none;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		transition: all 0.33s ease;
		li.item {
			opacity: 0;
			z-index: -1;
			visibility: hidden;
			width: 0;
			display: none;

			max-height: 100%;
			flex-basis: 18%;
			margin-bottom: 20px;
			position: relative;
			bottom: 0;
			transition: all 0.33s ease;
			@media (max-width: 1200px) {
				flex-basis: 30%;
			}
			@media (max-width: 767px) {
				flex-basis: 48%;
			}
			.vid-container {
				// width: 200px;
				height: 200px;
				.embed-container {
					min-height: 100%;
				}
			}
			.info {
				position: relative;
				cursor: pointer;
				.expand-info:before {
					// transition: all .33s ease;
					position: absolute;
					right: 0;
					top: 20px;
					color: #616060;
					font-size: 18px;
					content: "\f055";
					font-family: fontawesome;
				}
				.c-name {
					display: block;
					width: 90%;
					font-size: 16px;
					margin-bottom: 0;
				}
				.i-name {
					margin-top: 0;
					font-size: 15px;
					letter-spacing: 0.3px;
					color: rgba(#616060, .6);
				}
				.description {
					visibility: hidden;
					opacity: 0;
					z-index: 0;
					height: 0;
					transition: all 0.33s ease;
					span {
						display: block;
						color: rgba(#616060, .5);
						font-size: 12px;
						font-weight: bold;
						// font-style: italic;
					}
					p {
						font-size: 15px;
					}

				}
			}
			&.active {
				bottom: 5px;
				.info {
					.expand-info:before {
						content: "\f056";
					}
					.description {
						visibility: visible;
						opacity: 1;
						z-index: 1;
						height: 100%;

					}
				}
			}
			&.filtered {
				opacity: 1;
				visibility: visible;
				z-index: 1;
				width: 100%;
				display: block;
			}
			&:hover {
				bottom: 5px;
			}
		}
		&.flex-left {
			justify-content: flex-start;
			@media (max-width: 767px) {
				justify-content: space-between;
			}
			li {
				margin-right: 20px;
				@media (max-width: 767px) {
					margin-right: 0;
				}
			}
		}
	}
}

function theFilter() {
        var cFilter = $("#category-filter").attr("value"),
            iFilter = $("#instructor-filter").attr("value");

            
        $("#video-library .item").each(function () {
            var fullID = $(this).find(".course-id").text(),
                cName = fullID.split('-')[1],
                iName = $(this).find(".i-name").text();
            // - X
            $(this).removeClass("filtered");
            if (cFilter == "--") {
                // - -
                if (iFilter == "--") {
                    $(this).addClass('filtered');
                }
                // - 0
                if (iFilter != iName && iFilter != "--") {
                    $(this).removeClass('filtered');
                }
                // - 1 
                if (iFilter == iName) {
                    $(this).addClass('filtered');
                    $("#video-library ul").addClass("flex-left");
                }
            }
            // 0 X
            if (cFilter != cName && cFilter != "--") {
                // 0 -
                if (iFilter == "--") {
                    $(this).removeClass("filtered");
                }
                // 0 0
                if (iFilter != iName && iFilter != "--") {
                    $(this).removeClass("filtered");
                }
                if (iFilter == iName) {
                    $(this).removeClass("filtered");
                }

            }
            // 1 X
            if (cFilter == cName) {
                //1 -
                if (iFilter == "--") {
                    $(this).addClass("filtered");
                    $("#video-library ul").addClass("flex-left");
                }
                // 1 0 
                if (iFilter != iName && iFilter != "--") {
                    $(this).removeClass('filtered');
                }
                // 1 1
                if (iFilter == iName) {
                    $(this).addClass("filtered");
                    $("#video-library ul").addClass("flex-left");
                }
            }
        });
    }


$("#video-library .item").each(function() {
var theDescription = $(this).find(".description"),
    theInfo = $(this).find(".info"),
    $this = $(this);
    theInfo.click(function() {
        $this.toggleClass("active");
    });
});